[原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
来源:互联网 发布:windows 10 iot core 编辑:程序博客网 时间:2024/04/29 14:36
上篇文章给大家详细的介绍了,如何使用jQuery实现弹出各种窗口效果,引起了很多朋友们得反响,今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果,希望对朋友们有所帮助,下面我们就来分析一下怎样实现一个跟随鼠标滑动滑动的tab选项卡效果。
要实现这个效果其实很简单,我们先来看看效果
基于上述效果,如果使用jQuery技术怎么实现呢?我们不妨来做个简单的分析,
如图:
首先,我们要有一些小的div标签,用于显示table选项卡的每一个,如图所示。
其次,定义一些稍微大些用于显示内容的div,对应编号也如图
最后,初始化选项卡和内容层为第一个要显示的内容,然后我们设法通过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=utf-8" />
- <style>
- ul,li{
- background-color:#999;
- margin:0px;
- padding:0px;
- list-style:none;
- color:#fff;
- }
- li{
- padding:3px;
- float:left;
- margin-right:2px;
- border:#FFF 1px solid;
- }
- div{
- clear:left;
- height:150px;
- width:300px;
- background-color:#666;
- display:none;
- }
- li.tabin{
- background-color:#666;
- border:#666 solid 1px;
- }
- div.contentin{
- padding:3px;
- display:block;
- color:#FFF;
- }
- </style>
- <title>jQuery实现常见的滑动门效果</title>
- <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
- <script type="text/javascript">
- var timeoutid;
- $(function(){
- /*
- 实现滑动门核心
- 1、把当前样式(li、div选中状态)移除
- 2、设置鼠标移动到的当前li对象的样式选中状态
- 3、设置鼠标移动到的当前li对象所对应的div的样式选中状态
- 如何设置当前li对象所对应的div为选中状态?
- 解决:遍历所有的li并且根据当前li对象的索引值去设置对应索引值的div
- */
- //遍历所有的li
- $("li").each(function(index){
- //处理鼠标移动到li上的事件
- $(this).mouseover(function(){
- var liObj=$(this);
- timeoutid=setTimeout(function(){
- //清空所有的处于选中状态的样式
- $("li.tabin").removeClass();
- $("div.contentin").removeClass();
- //设置当前li索引值对应的div
- $("div").eq(index).addClass("contentin");
- //设置当前的li和当前li所对应的div
- liObj.addClass("tabin");
- },300);
- }).mouseout(function(){
- clearTimeout(timeoutid);
- });
- });
- });
- </script>
- </head>
- <body>
- jQuery实现常见的滑动门效果
- <hr>
- <ul>
- <li class="tabin">标签1</li>
- <li>标签2</li>
- <li>标签3</li>
- </ul>
- <div class="contentin">标签1内容文字</div>
- <div>标签2内容文字</div>
- <div>标签3内容文字</div>
- </body>
- </html>
源码下载:
jquery-door.html
[原创地址] [源码下载] [更多原创,多多支持多]
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- 基于jQuery实现的选项卡(滑动门)效果
- jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果
- jquery 实现简单tab选项卡效果
- jquery简单实现tab选项卡效果
- jquery简单实现tab选项卡效果
- jquery简单实现tab选项卡效果
- JQuery实现的简单标签选项卡效果
- 天易12----jquery实现简单的选项卡效果
- 使用JS实现选项卡和滑动门的效果
- jquery超简易选项卡切换效果
- 基于jQuery的简单web选项卡
- JQuery实现的 超简单的菜单缩放效果
- 10款基于jquery实现的超酷动画源码
- JQuery实现漂亮的滑动门效果
- jQuery实现选项卡(tabs)效果
- 小内存VPS优化-nginx,php,mysql
- Aprior算法简化算法——FP-Tree思想与实现
- GoldenDict万能词典
- flash自带的10种过渡效果
- POJ 3107 - Godfather
- [原创+源码]超简单:基于jQuery实现的选项卡(滑动门)效果
- 雁过也,月满西楼
- 句子翻转
- HDU 1166 点更新段查询线段树
- Linux卸载软件方法汇总
- POJ 3669 - Meteor Shower
- extern "C"的作用
- MFC中的CheckBox的使用
- 邂逅在华灯初上