定时器完成简单动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的动画效果</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            left: 0px;
        }
        #box2{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            left: 0px;
            top: 300px;
        }

    </style>
    <script type="text/javascript">
        window.onload=function () {

            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            var btn1=document.getElementById("btn1");
            var bnt2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
            var btn4=document.getElementById("btn4");
            btn4.onclick=function(){
                move(box2,"width",800,10);
            };
            btn3.onclick=function(){
                move(box2,"left",800,10);

            }
            btn1.onclick=function () {
              move(box1,"left",500,10);


                //关闭上一个定时器
                // clearInterval(timer);
                // timer= setInterval(function () {
                //     //获取新值
                //     var oldValue=parseInt(getStyle(box1,"left"));
                //     //在旧值的基础上增加
                //     var newValue=oldValue+1;
                //     //将新值附加给box1实现动画
                //   if(newValue>800){
                //       newValue==800;
                //   }
                //     box1.style.left=newValue+"px";
                //     //是box1在800px位置停止
                //     if (newValue==800){
                //         clearInterval(timer);
                //     }
                // },30);
            };
            bnt2.onclick=function () {
            move(box1,"width",500,10,function () {
               move(box1,"height",300,10);
            });

            };
            //obj:选择需要移动的元素
            //attr:要执行动画的样式
            //speed:移动的速度
            //target:终止坐标
            //callback:回调函数
            function move(obj ,attr,target,speed,callback) {
                clearInterval(obj.timer);
                var current=parseInt(getStyle(box1,attr));
                if (current>target){
                    speed=-speed;
                }
                  obj.timer= setInterval(function () {
                    //获取新值
                    var oldValue=parseInt(getStyle(obj,attr));
                    //在旧值的基础上增加
                    var newValue=oldValue+speed;
                    //将新值附加给box1实现动画
                    if(speed<0 && newValue<target ||speed>0&&newValue>target ){
                        newValue==target;
                    }
                    //！！！！！注意target是变量要用中括号括起来
                    obj.style[attr]=newValue+"px";
                    //是box1在800px位置停止
                    if (newValue==target){
                        //达到目的关闭定时器
                        clearInterval(obj.timer);
                        //动画执行完毕，调用回调函数
                        callback&&callback();
                    }
                },30);


            }
            //获取当前元素属性
            function getStyle(obj,name) {
                if(window.getComputedStyle){
                    return getComputedStyle(obj,null)[name];
                }else {
                    return obj.currentStyle[name];
                }
            }
        }
    </script>
</head>
<body>
<button id="btn1">向右移动</button>
<button id="btn2">向左移动</button>
<button id="btn3">绿色移动</button>
<button id="btn4">测试</button>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0;height: 1000px;border-left: 1px red solid ;position: absolute;left: 800px;top: 0"></div>
</body>
</html>
定时器完成简单动画

猜你喜欢
