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需再刷新一下页面才能执行]

您可能感兴趣的文章:

拼音排序

javascript克隆元素样式的实现代码
这是一个实验用的玩意，它可以克隆指定元素的最终样式，并包装成一个css类，它还可以证明Oprea 11.10 是个混球
2011-10-10
IE浏览器不支持getElementsByClassName的解决方法
这篇文章主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下
2014-08-08
如何HttpServletRequest文件对象并储存
这篇文章主要介绍了如何HttpServletRequest文件对象并储存,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
分享Javascript实用方法二
javascript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，本文给大家分享javascript实用方法二，感兴趣的朋友一起学习吧
2015-12-12
使用javascript创建快捷方式的简单实例
这篇文章介绍了使用javascript创建快捷方式的简单实例，有需要的朋友可以参考一下
2013-08-08
盘点javascript 正则表达式中中括号的【坑】
下面小编就为大家带来一篇盘点javascript 正则表达式中中括号的【坑】。小编觉得总结的不错。现在分享给大家，希望能给大家一个参考
2016-03-03
Firefox中beforeunload事件的实现缺陷浅析
beforeunload 指在页面卸载前提供的最后一次JS执行的机会
2012-05-05
浅析webpack 如何优雅的使用tree-shaking（摇树优化）
这篇文章主要介绍了webpack 如何使用tree-shaking（摇树优化）,本文介绍了什么是tree-shaking,commonJS 模块,es6 模块,怎么使用tree-shaking等,具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
2017-08-08
script不刷新页面的联动前后代码
如何实现script不刷新页面的联动，在本文有个不错的示例或许对大家有所帮助
2013-09-09
微信小程序wxml列表渲染原理解析
这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-11-11