JS动画函数的封装

来源：互联网发布：乐视无线显示网络异常编辑：程序博客网时间：2024/06/04 18:08

JS动画函数的封装

有很多常用的JavaScript功能实现，我们不妨将它们封装起来，方便以后的使用。
下面是我对JavaScript动画动画函数的封装，参考了其他人的博文，如果有冒犯，请联系我。

闲话少说，贴上demo

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>JS动画demo与函数封装</title>    <style>        .parent{            width: 300px;height: 300px;            background: gray;            position: relative;        }        .son{            position: absolute;            width: 50px;            height: 50px;            background: rgb(100, 100,180);        }    </style></head><body>    <div class = "parent">        <div class="son">        </div>    </div>    <script>        window.onload = function(){            var parent = document.getElementsByClassName("parent")[0];            var son = document.getElementsByClassName("son")[0];            parent.addEventListener("mouseover",function(){                animate(son, { "left": 100 }, function () { });            },false);            parent.onmouseleave = function () {                animate(son, { "left":0 }, function () { });            }        }    </script>    <script>        // 获取当前制定样式的属性值        function getStyle(ele,attr){            if(window.getComputedStyle){       //兼容性检测，优先采用W3C标准                return window.getComputedStyle(ele,null)[attr];            }else{                return ele.currentStyle[attr]; //兼容Ie低版本浏览器            }        }             /*        * 缓动动画函数        * 原理：盒子原本的样式值 + "步长"（不断变化的值）；达到目标值后停止缓动。        * ele：指定的节点对象        * attr_json：样式属性和值的集合（json对象格式，如{"width":200,"left":10}）        * callback:回调函数，动画执行完后执行的函数        * 注意：如果控制 盒子的透明度 在本函数json属性集合中需要使用opacity,控制层级需要使用zIndex        * */        function animate(ele,attr_json,callback){            // 清除定时器，避免动画重合            clearInterval(ele.timer);            ele.timer = setInterval(function(){                var flag = true;    //定时器是否清除的标记值                for(var attr in attr_json){                    var current = 0;                    //获取当前样式                    if(attr == "opacity"){          //如果是透明度，那么返回值，如果不兼容就返回0                        current = Math.round(parseInt(getStyle(ele,attr)*100))||0;                    }else{                          //其他                        current = parseInt(getStyle(ele,attr));                    }                    //计算步长,并进行取整来避免除不尽引起的误差                    var stepLength = (attr_json[attr] - current)/10;                    stepLength = stepLength > 0?Math.ceil(stepLength):Math.floor(stepLength);                    //判断要改变的样式是否是透明度                    if(attr == "opacity"){                        if("opacity" in ele.style){                            ele.style.opacity = (current+stepLength)/100;                        }else{                            ele.style.filter = "alpha(opacity = " + (current+stepLength)*10+")";                        }                    }                    //判断要改变的样式是否是层级                    else if(attr == "zIndex"){                        ele.style.zIndex = current+stepLength;                    }                    //其他属性                    else{                        ele.style[attr] = (current + stepLength) + "px";                    }                    //判断是否清除定时器                    if(current != attr_json[attr]){                        flag = false;                    }                }                if(flag){                    clearInterval(ele.timer);                    if(callback){                        callback();                    }                }            },10)        }    </script></body></html>

可以贴到自己的编辑器下试试哦。

关于定时器，可以看看下面的js中的setInterval和setTimeout使用实例

阅读全文

0 0