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

300 阅读 0 评论 198 点赞

我是靠谱客的博主还单身煎饼，这篇文章主要介绍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> 
 
</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()">abc</dd> 
        <dd id="bb" onmousemove="this.className=this.className+' qq';ww('bb');" onmouseout="this.className='';mm()">ghi</dd> 
        <dd id="ff" onmousemove="this.className=this.className+' qq';ww('ff');" onmouseout="this.className='';mm()">xyz</dd> 
        <dd id="dd" onmousemove="this.className=this.className+' qq';ww('dd');" onmouseout="this.className='';mm()">klu</dd> 
        <dd id="ee" onmousemove="this.className=this.className+' qq';ww('ee');" onmouseout="this.className='';mm()">vbm</dd> 
        <dt id="cc" style="display:none;"></dt> 
    </dl> 
</div> 
</body> 
</html>

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