jQuery实现的经典滑动门效果


Posted in Javascript onSeptember 22, 2015

本文实例讲述了jQuery实现的经典滑动门效果。分享给大家供大家参考。具体如下:

这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面。

运行效果截图如下:

jQuery实现的经典滑动门效果

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的鼠标拖动效果代码
May 30 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 #Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 #Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python实现选择排序
2017/06/04 Python
Python之读取TXT文件的方法小结
2018/04/27 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python多线程扫描端口(线程池)
2019/09/04 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
会计应届生的自荐信
2013/12/13 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
报到证办理个人委托书
2014/10/06 职场文书
党员年终个人总结
2015/02/14 职场文书
清明节寄语2015
2015/03/23 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python