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

来源：互联网发布：win10系统怎么优化编辑：程序博客网时间：2024/04/29 11:48

上篇文章给大家详细的介绍了，如何使用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

[原创地址] [源码下载] [更多原创，多多支持多]

[多图+详解]Android开发环境搭建全程演示（jdk+eclip+android sdk)