`
webcode
  • 浏览: 5940865 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

仿淘宝的拼音检索特效

JavaScriptCSSCC++C# 
阅读更多
<!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[i].className="normal";
$("c"+(i+1)).className="none";
}
}
}
</script>
</head>
<body>
<dlid="warpper">
<h5>拼音检索：</h5>

<dtonmouseover="changeMenu(this,0);">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>

<dtonmouseover="changeMenu(this,1);">b</dt>
<ddid="c2"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
</ul>
</dd>

<dtonmouseover="changeMenu(this,2);">c[ch]</dt>
<ddid="c3"class="none">
<ul>
<li><aherf="#">fasfs</a></li>
<li><aherf="#">fsdfsd</a></li>
<li><aherf="#">fdsfas</a></li>
</ul>
</dd>

<dtonmouseover="changeMenu(this,3);">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>

<dtonmouseover="changeMenu(this,4);">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>

<dtonmouseover="changeMenu(this,5);">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>
分享到：
| 发个简单漂亮实用的选项卡（多色可变）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics