前端开发之js基础(6)

js动画封装

代码实现如下

css样式
<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                margin: 0;
                padding: 5px;
                position: relative;
            }
            #box1{
                width: 100px;
                height: 150px;
                border: 1px solid #000;
                background: red;
                position: absolute;
            }
            #box2{
                width: 100px;
                height: 150px;
                border: 1px solid #000;
                background: yellow;
                position: absolute;
                top: 200px;
            }

        </style>

html
<button id="btn1">运动200</button>
        <button id="btn2">运动400</button>
        <div id="box">
            <div id="box1">

            </div>
            <div id="box2">

            </div>
        </div>

js实现
<script type="text/javascript">
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        btn1.onclick = function(){
            animate(box1,200);
            animate(box2,200);
        }
        btn2.onclick = function(){
            animate(box1,400);
            animate(box2,400);
        }
        function animate(ele,target){
            clearInterval(ele.timer);
            //保证可以实现正方向和反方向
            var speed = target>ele.offsetLeft?10:-10;
            ele.timer = setInterval(function(){
                //获取当前位置
                var val = target-ele.offsetLeft;
                //div实现移动
                ele.style.left = ele.offsetLeft+speed+"px";
                if(Math.abs(val)<Math.abs(speed)){
                    ele.style.left = target+"px";
                    clearInterval(ele.timer);
                }
            },40);

        }
    </script>