ITdaan
搜索本文相关内容

基于jQuery实现的选项卡（滑动门）效果

本文转载自  shuimeirendongdong  查看原文  2011/04/14  1136    div/ border/ function/ 效果/ 实现/ float/ jquery/ javascript           

上篇文章给大家详细的介绍了，如何使用jQuery实现弹出各种窗口效果，引起了很多朋友们得反响，今天再次给大家奉献一篇的新的基于jQuery实现的 “滑动门”（跟随鼠标滑动滑动的tab选项卡）效果，希望对朋友们有所帮助，下面我们就来分析一下怎样实现一个跟随鼠标滑动滑动的tab选项卡效果。
       要实现这个效果其实很简单，我们先来看看效果
       1.png
      基于上述效果，如果使用jQuery技术怎么实现呢？我们不妨来做个简单的分析，
     如图： 1.png
     首先，我们要有一些小的div标签，用于显示table选项卡的每一个，如图所示。
     其次，定义一些稍微大些用于显示内容的div，对应编号也如图
     最后，初始化选项卡和内容层为第一个要显示的内容，然后我们设法通过jQuery选择器选中所有的选项卡，添加鼠标悬停事件，通过遍历所有的，判断是否是当前鼠标悬停上的jQuery对象，进而设置样式。
     单单通过上述的理论感觉不是很清晰，下面把代码贴出来，供大家参考，对着代码去阅读程序
     源码如下：   

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <style>  
  6. ul,li{  
  7.   background-color:#999;  
  8.   margin:0px;  
  9.   padding:0px;  
  10.   list-style:none;  
  11.   color:#fff;  
  12. }  
  13. li{  
  14.   padding:3px;  
  15.   float:left;  
  16.   margin-right:2px;  
  17.   border:#FFF 1px solid;  
  18. }  
  19. div{  
  20.     
  21.   clear:left;  
  22.   height:150px;  
  23.   width:300px;  
  24.   background-color:#666;  
  25.   display:none;  
  26. }  
  27. li.tabin{  
  28.   background-color:#666;  
  29.   border:#666 solid 1px;  
  30. }  
  31. div.contentin{  
  32.     padding:3px;  
  33.     display:block;  
  34.     color:#FFF;  
  35. }  
  36.   
  37. </style>  
  38. <title>jQuery实现常见的滑动门效果</title>  
  39. <script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>  
  40.   
  41. <script type="text/javascript">  
  42. var timeoutid;  
  43.   $(function(){  
  44.         
  45.      /* 
  46.      实现滑动门核心 
  47.      1、把当前样式（li、div选中状态）移除 
  48.      2、设置鼠标移动到的当前li对象的样式选中状态 
  49.      3、设置鼠标移动到的当前li对象所对应的div的样式选中状态 
  50.         如何设置当前li对象所对应的div为选中状态? 
  51.          
  52.         解决：遍历所有的li并且根据当前li对象的索引值去设置对应索引值的div 
  53.      */   
  54.    //遍历所有的li  
  55.     $("li").each(function(index){  
  56.      //处理鼠标移动到li上的事件  
  57.      $(this).mouseover(function(){  
  58.            
  59.           var liObj=$(this);  
  60.           timeoutid=setTimeout(function(){     
  61.           //清空所有的处于选中状态的样式  
  62.           $("li.tabin").removeClass();  
  63.           $("div.contentin").removeClass();  
  64.           //设置当前li索引值对应的div  
  65.           $("div").eq(index).addClass("contentin");  
  66.            //设置当前的li和当前li所对应的div  
  67.             liObj.addClass("tabin");  
  68.              
  69.           },300);  
  70.             
  71.       }).mouseout(function(){  
  72.           clearTimeout(timeoutid);  
  73.           });  
  74.        
  75.    });  
  76.  });  
  77. </script>  
  78. </head>  
  79.   
  80. <body>  
  81. jQuery实现常见的滑动门效果  
  82. <hr>  
  83.    <ul>  
  84.     <li class="tabin">标签1</li>  
  85.     <li>标签2</li>  
  86.     <li>标签3</li>  
  87.    </ul>  
  88.    <div class="contentin">标签1内容文字</div>  
  89.    <div>标签2内容文字</div>  
  90.    <div>标签3内容文字</div>  
  91. </body>  
  92. </html>  

源码下载：
jquery-door.html

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

智能推荐

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。



猜您在找
使用JS实现选项卡和滑动门的效果 使用JS实现选项卡和滑动门的效果 [原创+源码]超简单：基于jQuery实现的选项卡（滑动门）效果 js实现简单的滑动门和tab选项卡 jQuery实现Tab，滑动门，选项卡，图片切换
 
China Scenic Area
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告