我用原生js封装了一个tab切换的效果，做了一个插件，比较简单，日后会稍加改进。
里面注释写了如何配置，仔细阅读以下就可以
来填坑来了，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){ //这里输入要进行动画的类名和间隔时间
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节点的方法
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;
},
//消除类名，使用默认类名
removeClassName: function (obj,classname) {
obj.className=classname;
},
//改变dom元素的style属性
changeStyle: function (obj,option,style) {//带冒号
obj.style[option]=style;
},
//自动进行动画
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)
},
//手动进行动画
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');
},
//事件处理函数封装
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)
});
}
},
//鼠标移动函数封装
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);
})
}
},
//鼠标移除函数封装
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：父节点，tagName：该节点的标签名。 这两个参数均可有可无
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>
