相关JQuery函数封装

在web开发过程中，有些时候任务重，事情多，很多动画效果大多不会再自己来实现，大部分都会使用自己曾经已经做好的动画效果。而为了使用起来快捷，大多都会将动画效果封装为函数，想要动画效果时便调用该动画效果的封装函数，在函数中传入相关参数就可以。因此，在这里为大家提供一些函数的封装。
一、获取DOM方法。由于通过类名获取DOM元素属于HTML5，因此具有兼容性，若想要兼容，则可以调用该方法。

//obj：标签/类名/ID名
function $(obj){
    if(obj.charAt(0)=="."){//判断是否是类名，若是类名，则返回数组
        var classname=obj.slice(1);
        var arr=[];
        var all=document.getElementsByTagName("*");
        for(var i=0;i<all.length;i++){
            if(all[i].className==classname){
                arr.push(a[i]);
            }
        }
        return arr;
    }else if(obj.charAt(0)=="#"){//判断是否为ID名
        return document.getElementById(obj.slice(1));
    }else{//若不是类名或ID名，则为标签
        return document.getElementsByTagName(obj);
    }
}

二、横向缓动效果。使用于横向轮播图。

//缓速框架,使得DOM元素缓动到指定位置,水平方向
function animationX(obj,target,time){//obj:DOM元素   target：目标位置    time：间隔时间  
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=(target-obj.offsetLeft)/10;//缓动速度
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        obj.style.left=obj.offsetLeft+speed+"px";
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
    },time)
}

三、垂直缓动效果。适用于垂直轮播图。

//缓速框架,使得DOM元素缓动到指定位置,垂直方向
function animationY(obj,target,time){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=(target-obj.offsetTop)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        obj.style.top=obj.offsetTop+speed+"px";
        if(obj.offsetTop==target){
            clearInterval(obj.timer);
        }
    },time)
}

四、多属性缓动。

function animation(obj,json,fn){//obj:元素,json:属性列表,fn:回调函数
                clearInterval(obj.timer);
                obj.timer = setInterval(function(){
                    var flag = true;
                    //json里面有几个属性就要执行几次
                    var target=0;//记录目标位置
                    var leader=0;//记录当前位置
                    var speed =0;//记录速度
                    for(var key in json){                       
                        if(key=='opacity'){
                            target = Math.round(json['opacity']*100)//0-100
                            leader = getStyle(obj,'opacity')*100//0-100
                        }
                        else{
                            target = parseInt(json[key]);
                            leader = parseInt(getStyle(obj,key));
                        }
                        speed = (target-leader)/10;
                        speed = speed>0?Math.ceil(speed):Math.floor(speed);
                        leader = leader + speed;//0-100
                        if(key=='opacity'){
                            obj.style.opacity = leader/100;
                            obj.style.filter = "alpha(opacity="+leader+")";
                        }
                        else if(key=="zIndex"){
                            obj.style.zIndex = json['zIndex'];
                        }
                        else{
                            obj.style[key] = leader+"px";
                        }

                        if(leader!=target){
                            flag = false                        
                        }
                    }   
                    if(flag){
                        clearInterval(obj.timer);
                        if(fn){
                            fn();
                        }
                    }           

                },20)
            }
//获取任意属性值
function getStyle(obj,attr){//obj:目标元素,attr:属性
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,null)[attr];
    }else{
        return obj.currentStyle[attr];
    }
}

五、获取浏览器可视区域宽高

function client(){
    return{
        "width":window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
        "height":window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
    }
}

六、获取卷曲的宽高

function scroll(){
    return{
        "top":document.documentElement.scrollTop+document.body.scrollTop,
        "left":document.documentElement.scrollLeft+document.body.scrollLeft
    }
}

七、事件监听

function addEvent(obj,type,fn){
    if(obj.addEventListener){
        obj.addEventListener(type,fn);
    }else{
        obj.attachEvent("on"+type,fn);
    }
}