JavaScript--封装好的运动函数+旋转木马例子

封装好的运动函数：

1.能控制目标元素的多种属性

2.能自动获取元素的样式表：

3.获取样式函数兼容

4.能对于元素的多属性进行动画（缓动动画）修改

5.能区分透明度等没单位的属性和px属性的变化

animate.js

/**
 * 获取样式函数
 * @param element 要获取的样式的对象
 * return 目标css样式对象
 * */
function getStyle(element) {
    if(window.getComputedStyle) {
        return  window.getComputedStyle(element,null);
    }else if(element.currentStyle){
        return element.currentStyle;
    }
}

/**
 * 动画函数
 * @param element html标签
 * @param attr 标签属性
 * @param target 目标参数
 * */
function  animate(element,obj) {
    clearInterval(element.timer);
    element.timer = setInterval(function () {
        var flag = true;
        for(var attr in obj){
            // 在for in 的内部要区别开到底是透明度还是像素px的变化
            if( attr == "opacity") {
                var current = getStyle(element)[attr];
                var target = obj[attr];
                current = current * 100;
                target = target * 100;
                // Math.round() 函数返回一个数字四舍五入后最接近的整数值。
                current = Math.round(current);
                var step = (target - current) / 10;
                current += current <=  target ? Math.ceil(step):Math.floor(step);
                if(current != target) {
                    flag = false;
                }
                // element.style.left等
                element.style[attr] = current / 100;
            }else if(attr == "zIndex"){
                element.style[attr] = obj[attr];
            } else{
                var current = parseInt(getStyle(element)[attr]);
                var target = obj[attr];
                var step = (target - current) / 10;
                current += current <=  target ? Math.ceil(step):Math.floor(step);
                if(current != target) {
                    flag = false;
                }
                // element.style.left等
                element.style[attr] = current+ "px";
            }
        }
        if(flag) {
            clearInterval(element.timer);
        }
    },40);
}

animate2.js

// 多个属性运动框架  添加回调函数
function animate(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;
                console.log(current);
            }
            else
            {
                current = parseInt(getStyle(obj,attr)); // 数值
            }
            // 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
                    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 getStyle(obj,attr) {  //  谁的      那个属性
    if(obj.currentStyle)  // ie 等
    {
        return obj.currentStyle[attr];  // 返回传递过来的某个属性
    }
    else
    {
        return window.getComputedStyle(obj,null)[attr];  // w3c 浏览器
    }
}

旋转木马例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转木马轮播图</title>
    <style>
        /*初始化  reset*/
        blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
        body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
        ol,ul{list-style:none}
        a{text-decoration:none}
        fieldset,img{border:0;vertical-align:top;}
        a,input,button,select,textarea{outline:none;}
        a,button{cursor:pointer;}

        .wrap{
            1200px;
            margin:100px auto;
        }
        .slide {
            height:500px;
            position: relative;
        }
        .slide li{
            position: absolute;
            left:200px;
            top:0;
        }
        .slide li img{
            100%;
        }
        .arrow{
            /*opacity: 0;*/
        }
        .prev,.next{
            76px;
            height:112px;
            position: absolute;
            top:50%;
            margin-top:-56px;
            background: url(images/prev.png) no-repeat;
            z-index: 99;
        }
        .next{
            right:0;
            background-image: url(images/next.png);
        }
    </style>
</head>

<body>
<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li>
                <a href="#"><img src="images/slidepic1.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/slidepic2.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/slidepic3.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/slidepic4.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/slidepic5.jpg" alt="" /></a>
            </li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:;" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>
<!--把动画函数封装好，再通过script标签的属性引入到当前文件-->
<script src="animate.js"></script>
<script>
    /**
     *   第一个功能：
     *      让图片都散开，到达每一张图片应该到达的位置
     *      根据config数组，设置每一张图片的位置即可
     *
     *   第二个功能
     *      旋转
     *      点击左右按钮
     */
    var config = [
        {
             400,
            top: 20,
            left: 50,
            opacity: 0.2,
            zIndex: 2
        }, //0
        {
             600,
            top: 70,
            left: 0,
            opacity: 0.8,
            zIndex: 3
        }, //1
        {
             800,
            top: 100,
            left: 200,
            opacity: 1,
            zIndex: 4
        }, //2
        {
             600,
            top: 70,
            left: 600,
            opacity: 0.8,
            zIndex: 3
        }, //3
        {
             400,
            top: 20,
            left: 750,
            opacity: 0.2,
            zIndex: 2
        } //4
    ];

    var slide = document.getElementById('slide');
    var slideItem = slide.children[0].children;
    var arrLeft = document.getElementById("arrLeft");
    var arrRight = document.getElementById("arrRight");
    // 页面加载完毕后，运行散开动画
    for(var i = 0 ; i < slideItem.length; i++ ) {
        animate(slideItem[i],config[i]);

    }
    // 给右按钮添加点击事件

    arrRight.onclick = function () {
        //splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
        // config.splice(0,1)[0] 截取数组的第一个元素
        // 再把截取的元素放到改变之后的数组的最后位置
        config.splice(config.length,0,config.splice(0,1)[0]);
        for(var i = 0 ; i < slideItem.length; i++ ) {
            animate(slideItem[i],config[i]);
        }
    }
    arrLeft.onclick = function () {
        config.splice(0,0,config.splice(config.length-1,1)[0]);
        for(var i = 0 ; i < slideItem.length; i++ ) {
            animate(slideItem[i],config[i]);
        }
    }


</script>
</body>

</html>