jQuery实现的经典滑动门效果
本文实例讲述了jQuery实现的经典滑动门效果。分享给大家供大家参考。具体如下：
这是一款jQuery 滑动门，从样式上来说，虽然有些古板，但已经具备了经典的滑动门功能，感兴趣的朋友可以继续美化一下界面。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/
具体代码如下：
<!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=gb2312" />
<title>jQuery 滑动门</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var len=$(".ul1 li").length;
var index;
var time;
$(".ul1 li").mousemove(function(){
index=$(".ul1 li").index(this);
show(index);
}).eq(0).mousemove();
$(".ul2").hover(function(){
clearInterval(time);
},function(){
time=setInterval(function(){
show(index)
index++;
if(index==len){index=0;}
},2000);
}).trigger("mouseleave");
})
function show(index) {
$(".ul2 li").eq(index).show().siblings().hide();
$(".ul1 li").css("background","url(images/aa.gif)").eq(index).css("background","url(images/bb.gif)");
}
</script>
<style type="text/css">
body{ font-family:"宋体"; font-size:9pt; color:#ffffff}
#container{ width:510px; height:200px; border:4px #1025c0 solid; margin:0 auto}
#container ul li{ cursor:pointer}
#container .top{ border:none}
#container .top ul{ margin:0; padding:0}
#container .top ul li{ cursor:pointer;float:left;list-style:none; width:100px; height:40px; line-height:40px; text-align:center; background:url(images/aa.gif) repeat-x; border:1px black solid}
#container .bottom{ width:510px; height:160px; color:#000000; border:none;}
#container .bottom ul{ margin:0; padding:0; width:510px; height:160px;}
#container .bottom ul li{ list-style:none}
.hide{ display:none}
</style>
</head>
<body>
<div id="container">
<div class="top">
<ul class="ul1">
<li>第一栏</li><li>第二栏</li><li>第三栏</li><li>第四栏</li><li>第五栏</li>
</ul>
</div>
<div class="bottom">
<ul class="ul2">
<li>第一栏第一栏第一栏第一栏第一栏</li><li class="hide">第二栏第二栏第二栏第二栏</li><li class="hide">第三栏第三栏第三栏第三栏</li><li class="hide">第四栏第四栏第四栏第四栏</li><li class="hide">第五栏第五栏第五栏第五栏</li>
</ul>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍jQuery实现自动切换播放的经典滑动门效果，包括了jQuery实现自动切换播放的经典滑动门效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现自动切换播放的经典滑动门效果。分享给大家供大家参考。具体如下： 这是一个滑动门代码，从外观上看，简洁经典，似乎与平时见到的滑动门没什么区别，不过它有一个重要的功能与众不同，那就是会自动切换【播放】滑动门的内容，像腾讯Q
-
本文向大家介绍JavaScript实现滑动门效果，包括了JavaScript实现滑动门效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法, 二、实现滑
-
本文向大家介绍jquery实现标题字体变换的滑动门菜单效果，包括了jquery实现标题字体变换的滑动门菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现标题字体变换的滑动门菜单效果。分享给大家供大家参考。具体如下： 这里使用jquery字体会变大的网页滑动门菜单，当把鼠标放在“门”上的时候，门内的菜单字体会变大变色，对应的内容同时切换，不知如何形容本效果，所以就叫字体
-
本文向大家介绍js实现简洁的TAB滑动门效果代码，包括了js实现简洁的TAB滑动门效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下： 这是一款滑动门代码，简洁TAB，简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时
-
本文向大家介绍JS+CSS实现简易实用的滑动门菜单效果，包括了JS+CSS实现简易实用的滑动门菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果。分享给大家供大家参考。具体如下： 这是一个简洁实用的CSS+JavaScript滑动门导航菜单，写时候，我尽量用最少的代码写出兼容性好的代码，希望这款滑动门大家能够喜欢，也希望研究JS的达人一同切磋，
-
本文向大家介绍js实现的早期滑动门菜单效果代码，包括了js实现的早期滑动门菜单效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现的早期滑动门菜单效果代码。分享给大家供大家参考。具体如下： 这里介绍的是传说中的早期滑动门菜单Demo代码，测试时请把鼠标放到左侧相应的导航栏目上，放在左侧菜单上的时候，你就发现玄机了，右侧的内容会跟着变化，JS与HTML结合实现的，比较传统的导航效