[原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果

上篇文章给大家详细的介绍了，如何使用jQuery实现弹出各种窗口效果，引起了很多朋友们得反响，今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”（跟随鼠标滑动滑动的tab选项卡）效果，希望对朋友们有所帮助，下面我们就来分析一下怎样实现一个跟随鼠标滑动滑动的tab选项卡效果。
   要实现这个效果其实很简单，我们先来看看效果

   基于上述效果，如果使用jQuery技术怎么实现呢？我们不妨来做个简单的分析，
   如图：
   首先，我们要有一些小的div标签，用于显示table选项卡的每一个，如图所示。
   其次，定义一些稍微大些用于显示内容的div，对应编号也如图
   最后，初始化选项卡和内容层为第一个要显示的内容，然后我们设法通过jQuery选择器选中所有的选项卡，添加鼠标悬停事件，通过遍历所有的，判断是否是当前鼠标悬停上的jQuery对象，进而设置样式。
   单单通过上述的理论感觉不是很清晰，下面把代码贴出来，供大家参考，对着代码去阅读程序
   源码如下：

Code:

<!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实现的选项卡（滑动门）效果相关推荐

全网最火 - 跳舞的鸭子动态源码 - 超简单
全网最火 - 跳舞的鸭子动态源码 - 超简单效果图: <!DOCTYPE html> <html lang="en"> <head><m ...
自己动手调试Android源码(超简单)
在自己动手编译Android最新源码一文中,我们为自己编译了一份最新的Android源码.很多时候,我们编译源码的目的不仅仅是尝试一番,而是希望对其进行调试,并修改源码,看看其中一些关键机制的运行原理 ...
android 贴纸源码,超简单集成HMS ML Kit 人脸检测实现可爱贴纸
前言在这个美即真理.全民娱乐的时代,可爱有趣的人脸贴纸在各大美颜软件中得到了广泛的应用,现在已经不仅局限于相机美颜类软件中,在社交.娱乐类的app中对人脸贴纸.AR贴纸的需求也非常广泛.本文详细介绍 ...
Android App接管手势处理TouchEvnet中单点触摸和多点触控的讲解及实战（附源码超简单实用）
运行有问题或需要源码请点赞关注收藏后评论区留言~~~ 一.单点触摸 dispatchTouchEvent onInterceptTouchEvent onTouchEvent三个方法的输入参数都是手势 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
从源码分析 Spring 基于注解的事务
从源码分析 Spring 基于注解的事务在spring引入基于注解的事务(@Transactional)之前,我们一般都是如下这样进行拦截事务的配置:  ...
含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功]
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称含文档+PPT+源码等]精品基于SSM的图书管理系统[包运行成功] 系统介绍 & ...
[附源码]JAVA毕业设计基于web旅游网站的设计与实现（系统+LW）
[附源码]JAVA毕业设计基于web旅游网站的设计与实现(系统+LW) 目运行环境项配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ E ...
android:自己动手编译Android源码(超详细)
自己动手编译Android源码(超详细) 涅槃1992 2016.06.20 02:12* 字数 4330 阅读 86819评论 89喜欢 339赞赏 7 在Android Studio代码调试一文中 ...

[原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果

[原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果相关推荐

最新文章

热门文章