JS仿淘宝实现的简单滑动门效果代码
本文实例讲述了JS仿淘宝实现的简单滑动门效果代码。分享给大家供大家参考。具体如下：
这是一个简单的仿淘宝滑动门效果代码，个人感觉真的挺不错，以前有过一款和这个差不多。在滑动门里你可以再次布局你的网页，可以做成一个功能超强大的导航，原示例是一个拼音索引程序，改成菜单也是可以的。
运行效果截图如下：
在线演示地址如下：
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>整站导航：</span></li>
<li>
<a href="#" class="index">A</a>
<div class="content">
<h3>百度有啊</h3>
<ul>
<li><a href="http://www.baidu.com">百度有啊</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://www.jb51.net/jiaoben/">网页特效</a></li>
<li><a href="http://www.baidu.com">百度搜索</a></li>
<li><a href="http://mp3.baidu.com">百度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程序设计有所帮助。
相关推荐
-
JS+CSS实现简易的滑动门效果代码
本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1
-
一个js实现的所谓的滑动门
滑动门:我不理解为什么这样叫. 我就命名为:JMenuTab吧,因为写它是为了当我的菜单. IE6,FireFox下测试通过. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.
-
简单通用的JS滑动门代码
复制代码 代码如下: <UL id=tabMainNav> <LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> <LI id=tab_ShareEmailNav onmousem
-
基于JavaScript实现滑动门效果
本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下 滑动门效果: 原理: 一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示. 假设图片的宽度是120px,其他三道门露出的宽度是80px. 初始状态下, 第二道门左边的距离是120px, 第三道门左边的距离是200px, 第四道门左边的距离是280px. 当第二道门打开时, 第二道门左边的距离是80px,为(120-40)px 第三道和第四道门左边的距离不变. 当第三道门打开时, 第二道门左边的距离是80px,
-
javascript 通用滑动门tab类
滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容
-
JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一个"门"的内容存入JS数组中,这样可以减少代码量,但也带来了一个扩展的问题,扩展性方面有待完善,仅供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-zxhd-menu-demo/
-
JS+CSS实现自动切换的网页滑动门菜单效果代码
本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
-
js通用滑动门类
滑动门通用JS /* 十三妖 qq:181907667 msn:wl181907667@hotmail.com 邮箱:thirdteendevil@163.com */ function scrollDoor(){ } scrollDoor.prototype = { sd : function(menus,divs,openClass,closeClass){ var _this = this; if(menus.length != divs.length) { alert("菜单层数量和内容
-
JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC
-
JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代