JS仿淘寶實現(xiàn)的簡單滑動門效果代碼
更新時間：2015年10月14日 09:59:04 作者：企鵝
這篇文章主要介紹了JS仿淘寶實現(xiàn)的簡單滑動門效果,可實現(xiàn)按字母分類滑動切換的功能,非常簡單實用,需要的朋友可以參考下
本文實例講述了JS仿淘寶實現(xiàn)的簡單滑動門效果代碼。分享給大家供大家參考。具體如下：
這是一個簡單的仿淘寶滑動門效果代碼，個人感覺真的挺不錯，以前有過一款和這個差不多。在滑動門里你可以再次布局你的網(wǎng)頁，可以做成一個功能超強大的導(dǎo)航，原示例是一個拼音索引程序，改成菜單也是可以的。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/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>整站導(dǎo)航：</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>網(wǎng)頁特效</h3>
<ul>
<li><a href="http://www.dbjr.com.cn/jiaoben/">網(wǎng)頁特效</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;}
//然后循環(huán)添加事件
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程序設(shè)計有所幫助。
相關(guān)文章
JavaScript學(xué)習(xí)筆記之數(shù)組去重
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之數(shù)組去重的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了JavaScript中的迭代器和生成器詳解,本文講解了迭代器、聲明自定義迭代器、生成器：一種更好的方式來構(gòu)建迭代器、生成器高級特性等內(nèi)容,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了bootstrap實現(xiàn)每隔5秒自動輪播效果，可以自己設(shè)置輪播間隔時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript數(shù)組去重的五種方法及其他細節(jié)和拓展
JavaScript數(shù)組去重這個問題,經(jīng)常出現(xiàn)在面試題中,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的五種方法及其他細節(jié)和拓展的相關(guān)資料,文中通過實例代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了js字符串操作函數(shù)toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes2023-08-08
這篇文章主要為大家詳細介紹了微信小程序可滑動周日歷組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript中this指向的問題是面試中常常會問到的，所以本文就來通過一些簡單的示例為大家詳細講講，文中的示例代碼講解詳細，需要的可以參考一下2023-04-04
淺談 Webpack 如何處理圖片(開發(fā)、打包、優(yōu)化)
這篇文章主要介紹了淺談 Webpack 如何處理圖片(開發(fā)、打包、優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了JS隱藏號碼中間4位，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
使用JavaScript實現(xiàn)彈出層效果的簡單實例
下面小編就為大家?guī)硪黄褂肑avaScript實現(xiàn)彈出層效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05