js 淘寶首頁(yè)的拼音排序效果

2024-05-06 14:15:22

字體：大中小

供稿：網(wǎng)友

<!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>無(wú)標(biāo)題文檔</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>      音序     <dl>         <dd class="first" id="aa" onmousemove="this.className=this.className+' qq';ww('aa')" onmouseout="this.className='first';mm()">abc         <dd id="bb" onmousemove="this.className=this.className+' qq';ww('bb');" onmouseout="this.className='';mm()">ghi         <dd id="ff" onmousemove="this.className=this.className+' qq';ww('ff');" onmouseout="this.className='';mm()">xyz         <dd id="dd" onmousemove="this.className=this.className+' qq';ww('dd');" onmouseout="this.className='';mm()">klu         <dd id="ee" onmousemove="this.className=this.className+' qq';ww('ee');" onmouseout="this.className='';mm()">vbm         <dt id="cc" style="display:none;">     </dl>  </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：各種常用瀏覽器getBoundingClientRect的解析

下一篇：js 進(jìn)度條實(shí)現(xiàn)代碼