快捷導(dǎo)航

js 淘寶首頁的拼音排序效果

更新時(shí)間：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>無標(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> <div   class="wppm3vysvbp"   id="qq">     <span id="wppm3vysvbp"    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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

拼音排序

相關(guān)文章

OfflineSave離線保存代碼再次發(fā)布使用說明
OfflineSave離線保存代碼再次發(fā)布使用說明...
2007-05-05
JavaScript中創(chuàng)建動(dòng)態(tài) QML 對(duì)象的方法
這篇文章主要介紹了 JavaScript中創(chuàng)建動(dòng)態(tài) QML 對(duì)象，下面文章主要分析了兩中方法，分別是從 QML 字符串創(chuàng)建對(duì)象和動(dòng)態(tài)創(chuàng)建組件以及刪除對(duì)象等方法，具有有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12
javascript 常用驗(yàn)證函數(shù)總結(jié)
隨著做項(xiàng)目數(shù)量的越來越越多，其中用到j(luò)s的地方很多相同，這里自己整理了一些常用表單驗(yàn)證的js方法，雖然和其他js驗(yàn)證框架有一定的差距，但是畢竟是自己總結(jié)的一些東西，在此與紀(jì)錄分享一下。
2016-06-06
JavaScript cookie與session的使用及區(qū)別深入探究
這篇文章主要介紹了Java中Cookie和Session詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-10-10
js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法
獲取頁面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo)，在js控制元素運(yùn)動(dòng)的過程中，對(duì)于頁面元素坐標(biāo)位置的獲取是經(jīng)常用到的，這里主要總結(jié)下兩種方法
2013-05-05
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下
2016-05-05
html5 canvas 詳細(xì)使用教程
本文主要對(duì)html5 canvas的使用進(jìn)行了詳細(xì)的介紹。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-01-01
javascript this用法小結(jié)
this是JavaScript中功能最強(qiáng)大的關(guān)鍵字之一。不幸的是，如果你不知道它具體怎么工作，你將很難正確使用它。
2008-12-12
淺談使用MVC模式進(jìn)行JavaScript程序開發(fā)
這篇文章主要介紹了淺談使用MVC模式進(jìn)行JavaScript程序開發(fā),同時(shí)也介紹了一些JavaScript的MVC框架,需要的朋友可以參考下
2015-11-11
JS實(shí)現(xiàn)深拷貝的幾種簡單方法示例
深拷貝和淺拷貝是在JavaScript中復(fù)制對(duì)象或數(shù)組時(shí)經(jīng)常遇到的概念,下面這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)深拷貝的幾種簡單方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10