各種Js封裝

標籤：gets   return   cti   client   距離   style   運動   filter   else   

擷取ClassName元素

function getClass(classname,id){    if(document.getElementsByClassName){        if(id){            return $(id).getElementsByClassName(classname);        }else{            return document.getElementsByClassName(classname);        }        if(id){            var allHtml = $(id).getElementsByTagName("*");        }else{            var allHtml = document.getElementsByTagName("*");        }        var arr = [];        for(var i = 0; i < allHtml.length; i++){            var allClass = allHtml[i].className.split(" ");            for(var j = 0; j < allClass.length; j++){                if(allClass[j] == classname){                    arr.push(allHtml[i]);                }            }        }        return arr;    }}

 

 

相容IE、Firefox、chrome的可視地區封裝

function client(){if(window.innerWidth){return {width:window.innerWidth,height:window.innerHeight}}else if(document.compatMode == "CSS1Compat"){return {width:document.documentElement.clientWidth;height:document.documentElement.clientHeight;}}else{return {width:document.body.clientWidth;height:document.body.clientHeight;}}}

 

封裝緩速運動架構（多個屬性）

function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr];}}function animate(obj,json,fn){clearInterval(obj.timer);obj.timer = setInterval(function(){var flag = true;for(var attr in json){var current = 0;if("opacity" == attr){current = parseInt(getStyle(obj,attr)*100) || 0;}else{current = parseInt(getStyle(obj,attr));}var step = (json[attr] - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);if("opacity" == attr){if("opacity" in obj.style){obj.style[attr] = (current + step) / 100;}else{obj.style.filter = "alpha(opacity =" + (current + step)*10 + ")"}}else if("zindex" == attr){obj.style[attr] = json[attr];}else{obj.style[attr] = current + step + "px";}if(current != json[attr]){flag = false;}}if(flag){clearInterval(obj.timer);if(fn){fn();}}},30)}

 

勻速動畫架構

function animate(obj,target,speed){    clearInterval(obj.timer);    //判斷box的距離使box是前走還是後退    var stepSize = obj.offsetLeft < target ? speed : -speed;     obj.timer = setInterval(function(){    var result = target - obj.offsetLeft;        obj.style.left = obj.offsetLeft + stepSize + "px";        if(Math.abs(result) <= speed){        clearInterval(obj.timer);        obj.style.left = target + "px";        }    },30)}

　　

　　

各種Js封裝