您的位置:首页 > 其它

山寨腾讯的Tab切换特效添加了自动切换功能

2012-09-10 16:11 363 查看
var Tab=function (){
this.initialize.apply(this,arguments);
};
Tab.prototype={
initialize:function (a){
this.setOptions(a);
this.binding();
},
setOptions:function (a){
this.tabElement=a.tabElement||null;
this.contentElement=a.contentElement||null;
this.currentClass=a.currentClass||"selected";
this.eventType=a.eventType||"onclick";
this.defaultIndex=a.defaultIndex||0;
this.deferTime=Math.abs(a.deferTime)||100;
this.autoTab = a.autoTab == undefined ? !0 : a.autoTab;
this.autoDeferTime=5000;
this.tabTimer = 0;
this.targetCache=null;
},
binding:function (){
var a=this.tabElement.children;
var b=this.contentElement.children;
var c=a.length;
var d=this;
var e=this.defaultIndex;
for(;c--;) {
a[c].setAttribute("index",c);
}
a[e].className=d.currentClass;
var h=a[e].getAttribute("index");
b[h].style.display="block";
this.targetCache=a[e];

d.autoTab&&d.loopTab();

this.tabElement[this.eventType]=function (a){

a=a||window.event;
var c=a.target||a.srcElement;

if(this!=c.parentNode) {
if (this == c.parentNode.parentNode) {
c = c.parentNode;
} else {
return;
}
}
d.tabTimer=window.setTimeout(function (a){
window.clearTimeout(d.tabTimer);
return function() {
var c=a.getAttribute("index");
var e=d.targetCache.getAttribute("index");
c!=e&&(a.className=d.currentClass,b[c].style.display="block",d.targetCache.className="",b[e].style.display="none",d.targetCache=a)&&d.autoTab&&d.loopTab();
}
}(c), d.deferTime);
}
},
loopTab : function() {
this.tabTimer = window.setTimeout(function(object, fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
var a=object.tabElement.children;
var b=object.contentElement.children;
var c=a.length;
var d=object;
var e=parseInt(object.targetCache.getAttribute("index"));
var n = (e + 1 < c) ? e + 1 : 0;

a
.className=d.currentClass;
b
.style.display="block";
d.targetCache.className="";
b[e].style.display="none";
d.targetCache=a
;

return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}(this, this.loopTab), this.autoDeferTime);
}
}
/*
var eduNum=document.getElementById("qq-tabs4").children.length,eduRan=Math.floor(Math.random()*eduNum);
new Tab({
tabElement:document.getElementById("qq-tabs4"),contentElement:document.getElementById("qq-contents4"),eventType:"onmouseover",defaultIndex:eduRan
})
*/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: