软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：拼音排序

<!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()">abc</dd> 
        <dd id="bb" onmousemove="this.className=this.className+ qq;ww(bb);" onmouseout="this.className=;mm()">ghi</dd> 
        <dd id="ff" onmousemove="this.className=this.className+ qq;ww(ff);" onmouseout="this.className=;mm()">xyz</dd> 
        <dd id="dd" onmousemove="this.className=this.className+ qq;ww(dd);" onmouseout="this.className=;mm()">klu</dd> 
        <dd id="ee" onmousemove="this.className=this.className+ qq;ww(ee);" onmouseout="this.className=;mm()">vbm</dd> 
        <dt id="cc" style="display:none;"></dt> 
    </dl> 
</div> 
</body> 
</html>

技术文章快速查找

面向对象继承实例(a如何继承b问题)(自写)

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

理解Javascript_14_函数形式参数与arguments

jquery 插件人性化的消息显示

jquery 表单取值常用代码

JavaScript与Div对层定位和移动获得坐标的实现代码

javascript客户端生成MD5值的函数代码

nodejs中使用monk访问mongodb

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建