标签：
function Tabs (tabs) { //找到选项卡 this.tabs = document.querySelector(tabs||".autotabs"); //找到当前选项卡里的所有的li this.aLi = WY.nodeListToArr(this.tabs.querySelectorAll(".nav li")); //找到所有的DIV,通过数组的filter方法获取满足条件的 var children=WY.nodeListToArr(this.tabs.children); this.aDiv = children.filter(function (item) { //将所有满足节点是DIV的item返回 return item.nodeName=="DIV"; }); console.log(this.aDiv); //给每个li绑定onmouseover事件 for(var i = 0,len = this.aLi.length;i<len;i++){ //因为这里调用了change方法，this指向由指向函数变成指向this.aLi,所以用bind将它绑定 this.aLi[i].onmouseover = this.change.bind(this); } } // Tabs.prototype.change=function (event) { var currLi=event.target; if(!currLi.classList.contains(".actived")){ var aActived=this.tabs.querySelectorAll(".actived"); aActived[0].removeAttribute("class"); aActived[1].removeAttribute("class"); } currLi.setAttribute("class","actived"); this.aDiv[this.aLi.indexOf(currLi)].setAttribute("class","actived"); } function AutoTabs (tabs) { Tabs.call(this,tabs);//继承父类的属性 this.iNow=0; for(var i=0,len=this.aLi.length;i<len;i++){ this.aLi[i].addEventListener("mouseover",this.change2.bind(this),false); } for(var i=0,len=this.aLi.length;i<len;i++){ this.aLi[i].addEventListener("mouseout",this.autoPlay.bind(this),false); } this.autoPlay(); } AutoTabs.prototype=new Tabs(); AutoTabs.prototype.autoPlay=function () { clearInterval(this.timer); this.timer=setInterval(this.play.bind(this),1000); } AutoTabs.prototype.play=function () { this.aLi[this.iNow].removeAttribute("class"); this.aDiv[this.iNow].removeAttribute("class"); this.iNow++; if(this.iNow>this.aLi.length-1){ this.iNow=0; } this.aLi[this.iNow].setAttribute("class","actived"); this.aDiv[this.iNow].setAttribute("class","actived"); } AutoTabs.prototype.change2=function () { clearInterval(this.timer); var target=event.target; this.iNow=this.aLi.indexOf(target); } (function(window){ //利用convertToArray函数创建数组 function convertToArray(nodes){ var array=null; try{ array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器 }catch(ex){ array=new Array(); for(var i=0,len=nodes.length;i<len;i++){ array.push(nodes[i]); } } return array; } //动态加载url对应的js function loadJavascript(url){ var oScript=document.createElement("script");//先创建script元素并赋给oScript oScript.type="text/javascript" oScript.src=url; document.body.appendChild(oScript); } //根据传递的js动态创建内部js function loadJavaScriptString(js){ var oScript=document.createElement("script"); oScript.type="text/javascript"; try{ var oTextNode=document.createTextNode(js); oScript.appendChild(oTextNode); } catch (ex){ oScript.text=js; } document.body.appendChild(oScript); } //加载url对应的css function loadStyle(url){ var oLink=document.createElement("link"); oLink.rel="stylesheet" oLink.type="text/css"; oLink.href=url; window.document.getElementsByTagName("head")[0].appendChild(oLink); } /*//动态添加一个表格（子节点方法创建表格） function jsonToTable (datas,className) { //根据这个json创建一个表格 var oTable = document.createElement("table"); oTable.className = className; //给这个表格添加表头 var oHeader = document.createElement("thead"); var oTheaderRow = document.createElement("tr"); oHeader.appendChild(oTheaderRow); for(var p in datas[0]){ var oTd = document.createElement("td"); var oText = document.createTextNode(p); oTd.appendChild(oText); oHeader.appendChild(oTd); } oTable.appendChild(oHeader); var oTbody = document.createElement("tbody"); for(var i=0;i<datas.length;i++){ //将一个user对象转换成一个tr var oTr = document.createElement("tr"); for(var p in datas[i]){ var oTd = document.createElement("td"); var oText = document.createTextNode(datas[i][p]); oTd.appendChild(oText); oTr.appendChild(oTd); } oTbody.appendChild(oTr); } oTable.appendChild(oTbody); return oTable; } */ /* 将一个JSON数据转换为Table * param array datas * param string className * */ //拼接字符串方法创建表格 function jsonToTable(datas, className) { //创建表格 var oTable = document.createElement("table"); oTable.className = className; //创建表头 var str = "
"; for(var p in datas[0]) { str += "" + p + ""; } str += "
"; //创建tbody str += ""; for(var i = 0, len = datas.length; i < len; i++) { str += "
"; for(var x in datas[i]) { str += "" + datas[i][x] + ""; } str += "
"; } str += ""; oTable.innerHTML = str; document.body.appendChild(oTable); } function matchesSelector(e,selector){ var bMatchers = false; if(e.matchesSelector){ bMatchers = e.matchesSelector(selector); }else if(e.msMatchesSelector){ bMatchers = e.msMatchesSelector(selector); }else if(e.mozMatchesSelector){ bMatchers = e.mozMatchesSelector(selector); }else if(e.webkitMatchesSelector){ bMatchers = e.webkitMatchesSelector(selector); } return bMatchers; } //获取元素距离页面的left偏移量 function getPageOffsetLeft(ele){ var actualOffset = ele.offsetLeft; var current = ele.offsetParent; while(current!=null){ actualOffset+=current.offsetLeft; current = current.offsetParent; } return actualOffset; } //获取元素距离页面的top偏移量 function getPageOffsetTop(ele){ var actualOffset = ele.offsetTop; var current = ele.offsetParent; while(current!=null){ actualOffset+=current.offsetTop; current = current.offsetParent; } return actualOffset; } function getEvent(event){ return event||window.event; } /* * 给元素ele添加type类型的事件处理程序callback */ function addListener(ele,type,callback){ if(ele.addEventListener){ ele.addEventListener(type,callback,false); }else if(ele.attachEvent){ ele.attachEvent("on"+type,callback) }else{ ele["on"+type]=callback; } } function getPageX(event){ var pageX = event.pageX; if(pageX===undefined){//ie8以下 pageX=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft) } return pageX; } function toArray(nodelist){ var array = null; try{ array = Array.prototype.slice.call(nodes.childNodes,0); // 非IE的浏览器的方法， 在IE8之前的版本将nodelist识别为一个com对象，不能像js那样转换 }catch(e){ array = new Array(); for (var i=0, len =nodes.length;i<len;i++) { //IE 的必须手动的去遍历 array.push(nodes[i]); } } return array; } function nodeListToArr(nodes){ var array = null; try{//针对非IE浏览器 array = Array.prototype.slice.call(nodes,0); }catch(ex){//IE浏览器手动枚举所有的成员 array = new Array(); for(var i=0;i<nodes.length;i++){ array.push(nodes[i]); } } return array; } function addHandler(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=handler; } } function removeHandler(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); } else if(element.detachEvent){ element.detachEvent("on"+type,handler); }else{ element["on"+type]=null; } } function elementStyle(element,attr){ var styleObj; if(window.getComputedStyle){ styleObj = window.getComputedStyle(element); }else{ styleObj =element.currentStyle; } return parseFloat(styleObj[attr]); } var WY={ loadStyle:loadStyle, jsonToTable:jsonToTable, matchesSelector:matchesSelector, addHandler:addHandler, getEvent:getEvent, elementStyle:elementStyle, nodeListToArr:nodeListToArr, } window.WY=WY; })(window);
标签：
原文地址：http://www.cnblogs.com/qdgcswy/p/5887577.html
