[javascript]switchTab:仿腾讯首页Tab栏切换js插件

　　腾讯首页的每个新闻栏目都是一个tab选项卡切换，属于延迟动作的：鼠标hover上去之后200毫秒才会切换，防止了因为浏览滑动导致的页面上选项卡的频繁切换。仿照这样的效果，自己写了一个js插件，实现了低版本浏览器IE7-8的兼容，没有用库，纯js写的。

　　难点的话就是如何实现延时动作，我想到的办法是用setTimeOut函数，期间要遍历Tabhead中的a节点进行绑定事件，写了一个很逗的闭包向setTimeOut传入循环变量。

 

　　核心js部分代码如下：

  1 /*

  2 *   仿Tencent 选项卡延迟切换

  3 *   参数：TabID，Tab标题的选中class，延迟时间

  4 *

  5 */

  6 

  7     //为数组对象添加判断子元素方法

  8     Object.prototype.isIn = function(item){

  9         var i = this.length; 

 10         while (i--) { 

 11             if ( item === this[i]) { 

 12               return true; 

 13             } 

 14         } 

 15         return false; 

 16     };

 17     Object.prototype.getPos = function(item){

 18         var i = this.length; 

 19         while (i--) { 

 20             if ( item === this[i]) { 

 21               return i; 

 22             } 

 23         } 

 24         return -1; 

 25     };

 26     //TabBar对象

 27     var TabBar = function(eId,className,delayTime){

 28         //防止漏写new导致bug  js设计模式里推荐 感觉比较鸡肋

 29         if(!(this instanceof TabBar)){

 30             return new TabBar(eId,className,delayTime);

 31         }

 32         //el:Tab组件对应的元素 

 33         //showNum:当前显示的Tab子栏序号，从0开始

 34         //selectClass：Tab标题栏选中class样式

 35         //delayTime: 鼠标延迟时间

 36         //hd,sub数组：tab头元素和tabSub元素数组

 37         this.el = document.getElementById(eId||"tab");

 38         this.showNum = 0;

 39         this.selectClass = className || "selected";

 40         this.delayTime = delayTime || 200;

 41         this.hd = this.el.getElementsByTagName("div")[0].getElementsByTagName("a");

 42         this.sub = this.el.getElementsByTagName("div")[1].querySelectorAll(".sub_item");

 43         //类初始化最后执行bind函数

 44         this.bindListener();

 45     }

 46     

 47     TabBar.prototype.show = function() {

 48         //用于显示当前ShowNum对应的Tab项

 49         this.sub[this.showNum].style.display ="block";

 50     };

 51     TabBar.prototype.hide = function() {

 52         //用于取消显示当前ShowNum对应的Tab项

 53         (this.sub[this.showNum]).style.display ="none";

 54     };

 55     TabBar.prototype.bindListener = function() {

 56         //绑定hover事件 self局部变量传递this，addEventListener默认对象为window

 57         var self = this;

 58         if(this.el.addEventListener == undefined){

 59             //兼容IE7，8

 60             var i =0;

 61             for( i=0;i<this.hd.length;i++){

 62                 this.hd[i].attachEvent("onmouseover",(function(pos){

 63                     return function (){

 64                         (self.hd[pos]).timer = setTimeout(function(){

 65                             self.switchTab(pos);

 66                         },self.delayTime);

 67                     }

 68                 })(i));

 69                 this.hd[i].attachEvent("onmouseout",(function(pos){

 70                     return function (){

 71                         clearTimeout( self.hd[pos].timer );

 72                     }

 73                 })(i));

 74             }

 75         }

 76         else{

 77             //非IE7,8 addEventListener绑定

 78             this.el.addEventListener("mouseover",function(event){

 79                 if( self.hd.isIn(event.target) ){

 80                     var pos = self.hd.getPos(event.target);

 81                     (self.hd[pos]).timer = setTimeout(function(){

 82                         self.switchTab(pos);

 83                     },self.delayTime);

 84                 }

 85             });

 86             this.el.addEventListener("mouseout",function(event){

 87                 if( self.hd.isIn(event.target) ){

 88                     var pos = self.hd.getPos(event.target);

 89                     clearTimeout( self.hd[pos].timer );

 90                 }

 91             });

 92         }

 93     };

 94     TabBar.prototype.switchTab = function(pos){

 95         //选项卡切换函数 参数：pos，当前Hover的子栏序号，从0开始

 96         if( pos !== this.showNum ){

 97             this.hd[this.showNum].className = "";

 98             this.hd[pos].className=this.selectClass;

 99             this.hide();

100             this.showNum = pos;

101             this.show();

102         }

103     };

104     //Tab实例化

105     var LeeTab =new TabBar("tab");

 

　　demo地址：Tab切换演示

 

　　恩，就是这样。