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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=gb2312' /titlejQuery滑动门/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript ' $(function(){ var len=$(。ul1 Li ').长度；定义变量指数；变化时间；$(.ul1 Li ').鼠标移动(函数(){ index=$(。ul1 Li ').索引（这个);显示（索引);}).等式(0).鼠标移动()；$(. 'ul2 ').悬停（函数(){ clearInterval(时间));}，function(){ time=setInterval(function(){ show(index)index；if(index==len){ index=0；} },2000);}).触发器(“鼠标离开”)；})函数show(index){ $(。ul2 Li ').eq(指数)。显示()。兄弟姐妹()。hide()；$(.ul1 Li ').css(“”背景，' url(images/aa.gif)').eq(指数)。css(“”背景，' URL(图像/bb。gif)')；}/脚本样式类型=' text/CSS '正文{ font-family : '宋体；font-size :9 ptcolor: # ffffff } #容器{ width:510px高度：200 pxborder:4px #1025c0固体；margin:0 auto } #容器ul li {光标：指针} #容器。顶级{ border:none } #容器。顶级ul { margin:0padding:0 } #容器top ul Li { cursor : pointer float : left list-style : none；宽度宽度：100像素高度：40 px线高：40 px文本对齐：居中；背景：网址(图片/aa。gif)重复-x；border:1px黑色固体} #容器。底部{ width:510px高度：160 pxcolor : # 000000 border : none } #容器。底部ul {边缘：0划水：0;宽度宽度：510px高度：160 px} #容器。底部ul li{ list-style:none} .隐藏{ display : none }/style/head dydiv id=' container ' div class=' top ' ul class=' ul1 ' Li第一栏/莉莉第二栏/莉莉第三栏/莉莉第四栏/莉莉第五栏/Li/ul/div div class=' bottom ' ul class=' ul2 ' Li第一栏第一栏第一栏第一栏第一栏/lili class='隐藏'第二栏第二栏第二栏第二栏/lili class='隐藏'第三栏第三栏第三栏第三栏/lili class='隐藏'第四栏第四栏第四栏第四栏/lili class='隐藏'第五栏第五栏第五栏第五栏/li/ul/div/div/body/html希望本文所述对大家的jQuery程序设计有所帮助。