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

您可能感兴趣的文章:

拼音排序

OfflineSave离线保存代码再次发布使用说明
OfflineSave离线保存代码再次发布使用说明...
2007-05-05
JavaScript中创建动态 QML 对象的方法
这篇文章主要介绍了 JavaScript中创建动态 QML 对象，下面文章主要分析了两中方法，分别是从 QML 字符串创建对象和动态创建组件以及删除对象等方法，具有有一定的参考价值，需要的小伙伴可以参考一下
2021-12-12
javascript 常用验证函数总结
随着做项目数量的越来越越多，其中用到js的地方很多相同，这里自己整理了一些常用表单验证的js方法，虽然和其他js验证框架有一定的差距，但是毕竟是自己总结的一些东西，在此与纪录分享一下。
2016-06-06
JavaScript cookie与session的使用及区别深入探究
这篇文章主要介绍了Java中Cookie和Session详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下
2022-10-10
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
获取页面中元素到文档区域document的横向、纵向坐标，在js控制元素运动的过程中，对于页面元素坐标位置的获取是经常用到的，这里主要总结下两种方法
2013-05-05
怎么限制input的text里输入的值只能是数字(正则、js)
这篇文章主要通过正则表达式和JS代码限制input的text里输入的值只能是数字的相关资料,需要的朋友可以参考下
2016-05-05
html5 canvas 详细使用教程
本文主要对html5 canvas的使用进行了详细的介绍。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
javascript this用法小结
this是JavaScript中功能最强大的关键字之一。不幸的是，如果你不知道它具体怎么工作，你将很难正确使用它。
2008-12-12
浅谈使用MVC模式进行JavaScript程序开发
这篇文章主要介绍了浅谈使用MVC模式进行JavaScript程序开发,同时也介绍了一些JavaScript的MVC框架,需要的朋友可以参考下
2015-11-11
JS实现深拷贝的几种简单方法示例
深拷贝和浅拷贝是在JavaScript中复制对象或数组时经常遇到的概念,下面这篇文章主要给大家介绍了关于JS实现深拷贝的几种简单方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具