各种Js封装

Posted 2020-08-23 Lzijian

获取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、火狐、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)
}