首页 > 网络编程 > JavaScript > javascript技巧 > 拼音排序

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

2009-05-18 00:53:21 作者：

模仿淘宝首页的拼音排序效果代码。

<!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> 
<script type="text/javascript"> 
    function ww(id){ 
    document.getElementById("cc").style.display=""; 
    var xx= document.getElementById(id).innerHTML; 
    document.getElementById("cc").innerHTML=xx+"的内容"; 
    } 
    function mm(){ 
    document.getElementById("cc").style.display="none"; 
    } 
</script> 
</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="#">abc</a></dd> 
        <dd id="bb" onmousemove="this.className=this.className+' qq';ww('bb');" onmouseout="this.className='';mm()"><a href="#">ghi</a></dd> 
        <dd id="ff" onmousemove="this.className=this.className+' qq';ww('ff');" onmouseout="this.className='';mm()"><a href="#">xyz</a></dd> 
        <dd id="dd" onmousemove="this.className=this.className+' qq';ww('dd');" onmouseout="this.className='';mm()"><a href="#">klu</a></dd> 
        <dd id="ee" onmousemove="this.className=this.className+' qq';ww('ee');" onmouseout="this.className='';mm()"><a href="#">vbm</a></dd> 
        <dt id="cc" style="display:none;"></dt> 
    </dl> 
</div> 
</body> 
</html>

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

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

您可能感兴趣的文章: