scroll()+client()函数封装+返回当前样式+动画多属性框架封装-兼容写法

最新推荐文章于 2023-09-13 17:24:53 发布

秋天1014童话

最新推荐文章于 2023-09-13 17:24:53 发布

阅读量372

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53928812

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

//返回当前样式
function getStyle(obj,attr){ //obj对象，attr属性名
            if(obj.currentStyle){ //ie等
                return obj.currentStyle[attr];
            }else{ //w3c
                return window.getComputedStyle(obj,null)[attr];
            }
        }

function $(id){ return document.getElementById(id);}

//封装scrollTop,scrollLeft
function scroll(){
    if(window.pageYOffset != null){
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }else if(document.compatMode == 'css1Compat'){ //声明了DTD
        //判断是否声明了DTD <!DOCTYPE html>--检测是不是怪异模式的浏览器
        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop
        }
    }else { //怪异模式下
        return {
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }
}

//封装clientWidth，clientHeight
function client(){
    if(window.innerHeight!=null){ //ie9+ 最新浏览器
        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){ //obj对象，attr属性名
    if(obj.currentStyle){ //ie等
        return obj.currentStyle[attr];
    }else{ //w3c
        return window.getComputedStyle(obj,null)[attr];
    }
}

//封装缓动运动框架 多个属性 回调函数（执行完动画，执行的函数） 支持透明度、zIndex
    /*function animateSlow(obj,attrJson,fn){ 
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            flag = true;
            for(var attr in attrJson){
                var current;
                if("opacity" == attr){
                    current = parseInt(getStyle(obj,attr)*100);
                }else{
                    current = parseInt(getStyle(obj,attr)); //去除样式的 “px”
                }

                var step = (attrJson[attr] - current)/10; 
                step = step>0 ? Math.ceil(step) : Math.floor(step);

                if("opacity" == attr){
                    if("opacity" in obj.style){ //支持opacity-----opacity:0.3
                        obj.style.opacity = (current + step)/100;
                    }else{ //ie6----filter:alpha(opacity=30);
                        obj.style.filter = "alpha(opacity="+ (current+step)+")";
                    }

                }else if("zIndex"==attr){
                    obj.style.zIndex = attrJson[attr];
                }
                else{
                    obj.style[attr] = current + step + "px";
                }
                if(current != attrJson[attr]){ //多个条件，只要有一个不满足，就是false
                    flag = false;
                }
            }
            if(flag == true){
                clearInterval(obj.timer);
                if(fn){
                    fn();
                }
            }
        },30);
    }*/
     function animateSlow(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                //开始遍历 json
                // 计算步长    用 target 位置 减去当前的位置  除以 10
               // console.log(attr);
                var current = 0;
                if(attr == "opacity")
                {
                    current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; //用户没有定义opacity，则返回undefined
                    console.log(current);
                }
                else
                {
                    current = parseInt(getStyle(obj,attr)); // 数值，去除样式的 “px”
                }
               // console.log(current);
                 // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //判断透明度
                if(attr == "opacity")  // 判断用户有没有输入 opacity
                {
                     if("opacity" in obj.style)  // 判断 我们浏览器是否支持opacity
                     {
                         // obj.style.opacity，//支持opacity-----opacity:0.3
                         obj.style.opacity = (current + step) /100; 
                     }
                    else
                     {  // obj.style.filter = alpha(opacity = 30)
                         obj.style.filter = "alpha(opacity = "+(current + step)* 10+")";

                     }
                }
                else if(attr == "zIndex")
                {
                    obj.style.zIndex = json[attr];
                }
                else
                {
                    obj.style[attr] = current  + step + "px" ;
                }

                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                if(fn)   // 很简单   当定时器停止了。 动画就结束了  如果有回调，就应该执行回调
                {
                    fn(); // 函数名 +  （）  调用函数  执行函数 暂且这样替代
                }
            }
        },30)
    }

    //匀速运动
    function animateUniform(obj,target,speed){
            clearInterval(obj.timer);  // 先清除定时器
            var _speed = obj.offsetLeft < target ? speed : -speed; //判断是正的方向走，还是倒着走

            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft; //记录现位置距离目标位置差值
                obj.style.left = obj.offsetLeft + _speed + "px";

                if(Math.abs(result) <= speed){ //距离差值小于等于5
                    clearInterval(obj.timer);
                    obj.style.left = target +"px"; //补足最后几px的差距
                }
            },30);
        }

秋天1014童话

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scroll()+client()函数封装+返回当前样式+动画多属性框架封装-兼容写法

//返回当前样式function getStyle(obj,attr){ //obj对象，attr属性名 if(obj.currentStyle){ //ie等 return obj.currentStyle[attr]; }else{ //w3c return window.getCo
复制链接

扫一扫

专栏目录