仿淘宝的拼音检索特效
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>仿taobao效果</title>
<styletype="text/css">
*{margin:0;padding:0;}
body{font:normal12pxVerdana,Arial,Helvetica,sans-serif;text-align:center;}
#warpper{position:absolute;left:100px;top:100px;}
h5{float:left;}
a{text-decoration:underline;cursor:pointer;font-weight:bold;}
dl{height:18px;line-height:18px;background:#f7f7f7;padding:010px;}
dt,.normal{float:left;padding:010px;border-right:1pxsolid#ccc;text-decoration:none;width:auto;cursor:pointer;}
dt.over{position:relative;border:1pxsolid#86e5f0;padding:010px15px10px;border-bottom:1pxsolid#caf1f1;margin:-1px00-1px;z-index:1000;color:#ff6026;text-decoration:underline;background:#caf1f1;height:22px;}
li{float:left;list-style-type:none;margin:5px10px;width:120px;}
dldd{position:absolute;width:500px;left:0;top:37px!important;border:1pxsolid#86e5f0;background:#caf1f1;filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=120,color=#cccccc);padding:10px0;}
.block{display:block;}
.none{display:none;}
</style>
<scriptlanguage="javascript">
function$(str){returndocument.getElementById(str);}
function$$(str){returndocument.getElementsByTagName(str);}
functionchangeMenu(thisObj,num){
if(thisObj.className=="over")returnfalse;
vartabObj=thisObj.parentNode.getAttribute("id");
varobj_dt=$("warpper").getElementsByTagName("dt");
for(vari=0;i<obj_dt.length;i++){
if(i==num){
thisObj.className="over";
$("c"+(i+1)).className="block";
}
else{
obj_dt.className="normal";
$("c"+(i+1)).className="none";
}
}
}
</script>
</head>
<body>
<dlid="warpper">
<h5>拼音检索：</h5>
<dt>a</dt>
<ddid="c1"class="none">
<ul>
<li><aherf="#">Adidas</a></li>
<li><aherf="#">AEE/爱意</a></li>
<li><aherf="#">AF</a></li>
<li><aherf="#">AF棒球帽</a></li>
<li><aherf="#">Agatha</a></li>
<li><aherf="#">Albion/奥尔滨</a></li>
<li><aherf="#">AMD</a></li>
<li><aherf="#">Andox</a></li>
<li><aherf="#">Artini</a></li>
<li><aherf="#">爱普生</a></li>
</ul>
</dd>
<dt>b</dt>
<ddid="c2"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
</ul>
</dd>
<dt>c</dt>
<ddid="c3"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
<li><aherf="#">fdsfas</a></li>
</ul>
</dd>
<dt>d</dt>
<ddid="c4"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
<li><aherf="#">fdsfas</a></li>
<li><aherf="#">fasdffsd</a></li>
</ul>
</dd>
<dt>e</dt>
<ddid="c5"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
<li><aherf="#">fdsfas</a></li>
<li><aherf="#">fasdffsd</a></li>
<li><aherf="#">fasdfsaf</a></li>
</ul>
</dd>
<dt>f</dt>
<ddid="c6"class="none">
<ul>
<li><aherf="#">阿里西西</a></li>
<li><aherf="#">alixixi.com</a></li>
<li><aherf="#"><atarget="_blank"href="http://www.alixixi.com/"class="wordstyle">web开发</a></a></li>
<li><aherf="#">alixixi</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
<li><aherf="#">Fancl</a></li>
</ul>
</dd>
</dl>
</body>
</html>
页:
[1]