js 淘宝首页的拼音排序效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<style type="text/css"> 
dl,dd,dt { 
    margin:0; 
    padding:0; 
} 
#qq { 
    width:600px; 
    overflow:hidden; 
    height:500px; 
    margin:0 auto; 
    background:#fafafa; 
    padding:15px; 
} 
#qq span { 
    display:block; 
    width:80px; 
    height:25px; 
    line-height:25px; 
    float:left; 
} 
dl { 
    width:500px; 
    line-height:25px; 
    overflow:hidden; 
    height:200px; 
    padding-left:1px; 
    position:relative; 
} 
dd { 
    float:left; 
    border-left:1px solid #ccc; 
    margin-left:-1px; 
    padding:1px 5px 0; 
    display:inline;/*format ie6 双倍边距*/ 
} 
dt { 
    width:99%; 
    height:100px; 
    border:1px solid #f00; 
    position:absolute; 
    left:0; 
    top:26px; 
} 
dd a{display:block;padding:1px 5px 0 5px;font-weight:bold;} 
.first {border:0 none;margin-left:0;} 
.qq { 
    border:1px solid #f00; 
    border-bottom:0 none; 
    z-index:20; 
    padding:0 4px 0 5px; 
    position:relative; 
    margin-left:-1px; 
    background:#fff; 
} 
dd:hover dt {display:block;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20%20%20%20function%20ww(id)%7B%20%0D%0A%20%20%20%20document.getElementById(%22cc%22).style.display%3D%22%22%3B%20%0D%0A%20%20%20%20var%20xx%3D%20document.getElementById(id).innerHTML%3B%20%0D%0A%20%20%20%20document.getElementById(%22cc%22).innerHTML%3Dxx%2B%22%E7%9A%84%E5%86%85%E5%AE%B9%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20mm()%7B%20%0D%0A%20%20%20%20document.getElementById(%22cc%22).style.display%3D%22none%22%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div id="qq"> 
    <span class="title">音序</span> 
    <dl> 
        <dd class="first" id="aa" onmousemove="this.className=this.className+' qq';ww('aa')" onmouseout="this.className='first';mm()"><a href="#" _ewebeditor_ta_href="%23">abc</a></dd> 
        <dd id="bb" onmousemove="this.className=this.className+' qq';ww('bb');" onmouseout="this.className='';mm()"><a href="#" _ewebeditor_ta_href="%23">ghi</a></dd> 
        <dd id="ff" onmousemove="this.className=this.className+' qq';ww('ff');" onmouseout="this.className='';mm()"><a href="#" _ewebeditor_ta_href="%23">xyz</a></dd> 
        <dd id="dd" onmousemove="this.className=this.className+' qq';ww('dd');" onmouseout="this.className='';mm()"><a href="#" _ewebeditor_ta_href="%23">klu</a></dd> 
        <dd id="ee" onmousemove="this.className=this.className+' qq';ww('ee');" onmouseout="this.className='';mm()"><a href="#" _ewebeditor_ta_href="%23">vbm</a></dd> 
        <dt id="cc" style="display:none;"></dt> 
    </dl> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程