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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
js实现汉字排序的方法
Jul 23 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
详解ES6中的let命令
Apr 05 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
医院辞职信范文
2014/01/17 职场文书
公益广告标语
2014/06/19 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android