我用原生js封裝了一個tab切換的效果，做了一個插件，比較簡單，日后會稍加改進(jìn)。
里面注釋寫了如何配置，仔細(xì)閱讀以下就可以
來填坑來了，IE8以下有兩個坑，首先不支持getElementsByclassName，需要判斷一下，另外就是attachEvent中指針的問題。
里面都做了改正。http://www.cnblogs.com/kingwell/p/3294704.html這里給一個連接，可以自己看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.Event</title>
<style>
*{
padding:0;
margin: 0;
}
.list{
width: 240px;
height: 60px;
border: 1px solid salmon;
}
.list ul li{
list-style-type: none;
width: 40px;
height: 40px;
margin: 10px;
float: left;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.select{
background: slateblue;
}
.contentBox{
width: 200px;
height: 200px;
border: 1px solid salmon;
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="list" id="list">
<ul>
<li class="list_1 ">one</li>
<li class="list_1">two</li>
<li class="list_1">three</li>
<li class="list_1">four</li>
</ul>
</div>
<div class="content" id="content">
<div class="contentBox">one-content</div>
<div class="contentBox">two-content</div>
<div class="contentBox">three-content</div>
<div class="contentBox">four-content</div>
</div>
</div>
</body>
<script type="text/javascript">
window.onload= function () {
new move({
classname1:'list_1',
classname2:' select',
deplay:100
});
};
var move= function (options){ //這里輸入要進(jìn)行動畫的類名和間隔時間
this.time=null;
this.step=0;
this.defaults={
classname1:'list_1',
classname2:' select',
deplay:1000
};
this.list=this.getDom(".list_1");
this.contentBox=this.getDom(".contentBox");
this.checkBrower();
/* this.list=document.getElementById("list").getElementsByTagName("li");
this.contentBox=document.getElementById("content").getElementsByTagName("div");*/
this.autoplay();
this.events(this.list,'click', function () {
clearInterval(this.time);
console.log("1");
});
this.mouseover();
this.mouseout();
};
move.prototype={
//兼容性判斷
checkBrower: function () {
var that=this;
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if (isIE){
if (isIE6){
that.list=document.getElementById("list").getElementsByTagName("li");
that.contentBox=document.getElementById("content").getElementsByTagName("div");
}else if (isIE8){
that.list=document.getElementById("list").getElementsByTagName("li");
that.contentBox=document.getElementById("content").getElementsByTagName("div");
}else if (isIE7){
that.list=document.getElementById("list").getElementsByTagName("li");
that.contentBox=document.getElementById("content").getElementsByTagName("div");
}
}
},
//封裝獲取DOM節(jié)點的方法
getDom: function (selector) {
var method=selector.substr(0,1)=="." ? "getElementsByClassName":"getElementById";
return document[method](selector.substr(1));
},
//使用摻合模式，引入配置項
mixin: function (defaults,options) {
var that=this;
for(var key in options){
that.defaults[key]=options[key];
}
},
//添加類名
addClassName: function (obj,classname) {
obj.className+=classname;
},
//消除類名，使用默認(rèn)類名
removeClassName: function (obj,classname) {
obj.className=classname;
},
//改變dom元素的style屬性
changeStyle: function (obj,option,style) {//帶冒號
obj.style[option]=style;
},
//自動進(jìn)行動畫
autoplay: function () {
var that=this;
that.time=setInterval(function () {
for(var i=0;i<that.contentBox.length;i++){
that.list[i].id=i;
that.contentBox[i].id=i;
that.removeClassName(that.list[i],that.defaults.classname1);
that.changeStyle(that.contentBox[i],'display','none');
}
that.step=that.step%4;
that.addClassName(that.list[that.step],that.defaults.classname2);
that.changeStyle(that.contentBox[that.step],'display','block');
that.step++;
},1000)
},
//手動進(jìn)行動畫
play: function (index) {
var that=this;
for(var i=0;i<that.list.length;i++){
that.removeClassName(that.list[i],that.defaults.classname1);
that.changeStyle(that.contentBox[i],'display','none');
}
that.addClassName(that.list[index],that.defaults.classname2);
that.changeStyle(that.contentBox[index],'display','block');
},
//事件處理函數(shù)封裝
events: function (obj,event,done) {
if(obj.addEventListener){
obj.addEventListener(event,done,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+event, function () {
done.apply(obj,arguments)
});
}
},
//鼠標(biāo)移動函數(shù)封裝
mouseover: function (){
var that=this;
for(var i=0;i<that.list.length;i++){
that.events(that.list[i],'mouseover', function () {
clearInterval(that.time);
that.play(this.id);
})
}
for(var j=0;j<that.contentBox.length;j++){
that.events(that.contentBox[j],'mouseover', function () {
clearInterval(that.time);
})
}
},
//鼠標(biāo)移除函數(shù)封裝
mouseout: function () {
var that=this;
for(var i=0;i<that.list.length;i++){
that.events(that.list[i],'mouseout', function () {
clearInterval(that.time);
that.step=this.id;
that.autoplay();
})
}
for(var j=0;j<that.contentBox.length;j++){
that.events(that.contentBox[j],'mouseout', function () {
clearInterval(that.time);
that.autoplay();
})
}
}
};
function getElementsByClassName(className, root, tagName) { //root：父節(jié)點，tagName：該節(jié)點的標(biāo)簽名。 這兩個參數(shù)均可有可無
if (root) {
root = typeof root == "string" ? document.getElementById(root) : root;
} else {
root = document.body;
}
tagName = tagName || "*";
if (document.getElementsByClassName) { //如果瀏覽器支持getElementsByClassName，就直接的用
return root.getElementsByClassName(className);
} else {
var tag = root.getElementsByTagName(tagName); //獲取指定元素
var tagAll = []; //用于存儲符合條件的元素
for (var i = 0; i < tag.length; i++) { //遍歷獲得的元素
for (var j = 0, n = tag[i].className.split(' ') ; j < n.length; j++) { //遍歷此元素中所有class的值，如果包含指定的類名，就賦值給tagnameAll
if (n[j] == className) {
tagAll.push(tag[i]);
break;
}
}
}
return tagAll;
}
}
</script>
</html>
