上篇文章给大家详细的介绍了，如何使用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
[原创地址] [源码下载] [更多原创，多多支持多]
