本文實例講述了JS仿淘寶實現的簡單滑動門效果代碼。分享給大家供大家參考。具體如下：
這是一個簡單的仿淘寶滑動門效果代碼，個人感覺真的挺不錯，以前有過一款和這個差不多。在滑動門里你可以再次布局你的網頁，可以做成一個功能超強大的導航，原示例是一個拼音索引程序，改成菜單也是可以的。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-f-taobao-simple-hdm-style-demo/
具體代碼如下：
<!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=utf-8" /><title>簡單仿淘寶的一個不錯的滑動門</title><style type="text/css">body{font-size:12px;position:relative;font-family:Verdana, Geneva, sans-serif;}a{color:blue;}ul{margin:0;padding:0;list-style:none;}#navigation{height:26px;}#navigation li{float:left;}#navigation li.show .content{display:block;}#navigation li a,#navigation li span{display:inline-block;border:solid 1px #fff;border-bottom:none;height:26px;padding:0 6px;line-height:20px;overflow:hidden}#navigation li a:hover,#navigation li.show a.index{background:#DBF3FE;border-color:#0a0;position:relative;top:0px;z-index:2;}#container{position:relative;width:800px;margin:50px;}#navigation li .content{position:absolute;left:0;top:26px;background:#DBF3FE;border:solid 1px #0a0;width:760px;padding:20px;display:none;}#navigation li .content ul li{margin-right:10px;float:none;display:inline;}#navigation li .content ul li a{border:none;}#navigation li .content ul li{width:120px;}#navigation li .content ul li h3{clear:both;text-align:left;}</style></head><body><div id="container"> <ul id="navigation"> <li><span>整站導航：</span></li> <li> <a href="#" class="index">A</a> <div class="content"> <h3>百度有啊</h3> <ul> <li><a >百度有啊</a></li> <li><a href="#">致富小康</a></li> </ul> <h3>腳本下載</h3> <ul> <li><a href="#">黃河泰山</a></li> <li><a href="#">池魚之殃</a></li> <li><a href="#">百度有啊</a></li> </ul> </div> </li> <li> <a href="#" class="index">B</a> <div class="content"> <h3>網頁特效</h3> <ul> <li><a href="http://m.survivalescaperooms.com/jiaoben/">網頁特效</a></li> <li><a >百度搜索</a></li> <li><a >百度MP3</a></li> </ul> <h3>精品代碼</h3> <ul> <li><a href="#">代碼索引</a></li> <li><a href="#">百度搜索</a></li> </ul> </div> </li> <li><a href="#" class="index">C</a><div class="content">C</div></li> <li><a href="#" class="index">D</a><div class="content">D</div></li> <li><a href="#" class="index">E</a><div class="content">E</div></li> <li><a href="#" class="index">F</a><div class="content">F</div></li> <li><a href="#" class="index">G</a><div class="content">G</div></li> <li><a href="#" class="index">H</a><div class="content">H</div></li> <li><a href="#" class="index">I</a><div class="content">I</div></li> <li><a href="#" class="index">J</a><div class="content">J</div></li> <li><a href="#" class="index">K</a><div class="content">K</div></li> <li><a href="#" class="index">L</a><div class="content">L</div></li> <li><a href="#" class="index">M</a><div class="content">M</div></li> </ul></div></body></html><script type="text/javascript">function showAjaxContent(){ var obj=document.getElementById("navigation"); var liObj=obj.getElementsByTagName("li"); var length=liObj.length; var currentLiObj; for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(currentLiObj.parentNode!=obj){continue;} //然后循環添加事件 currentLiObj.onmouseover=function(){ if(this.className.indexOf("show")<0){ this.className+=" show"; } clearStyle(this); } currentLiObj.onmouseout=function(){ this.className=this.className.replace("show",""); clearStyle(this); } } function clearStyle(obj){ for(var i=0;i<length;i++){ currentLiObj=liObj[i]; if(obj!=currentLiObj){ currentLiObj.className=currentLiObj.className.replace("show",""); } } }}showAjaxContent();</script>希望本文所述對大家的JavaScript程序設計有所幫助。
新聞熱點
疑難解答
