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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
Vue仿支付宝支付功能
May 25 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 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
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP Session机制简介及用法
2014/08/19 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python palywright库基本使用
2021/01/21 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
党员的自我评价范文
2014/01/02 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
经典演讲稿汇总
2014/05/19 职场文书
服装设计师求职信
2014/06/04 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS