其他分享
首页 > 其他分享> > 封装匀速动画

封装匀速动画

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            position: absolute;
            margin-top: 30px;
            left: 0px;

        }
    </style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    my$("btn2").onclick = function () {
        //只需要产生一个定时器, 可以先清理定时器, 再设置
        clearInterval(this.timeId);
        this.timeId = setInterval(function () {
            //1.获取div当前的位置--->看成盒子当前的left值
            var current = my$("box").offsetLeft;//400
            //2.div每一次移动多少像素 = 10 即步数
            var step = 10;
            //3.每次移动后的距离
            current += step;
            //4.判断移动后的位置是否达到目标位置
            if(current <= 800){
                my$("box").style.left = current + "px";
            }else{
                //清理定时器
                clearInterval(this.timeId);
            }

        },30)

    }
    //封装匀速动画函数--->任意一个元素移动到指定的目标位置
    //@params : 元素  目标位置
    function animate(element,target ) {
        //先清理定时器
        clearInterval(element.timeId)
        element.timeId = setInterval(function () {
            //1.获取div当前的位置--->看成盒子当前的left值
            var current = element.offsetLeft;//number类型
            //2.div每一次移动多少像素 = 10 即步数
            var step = 7;
            //2.1判断往哪边移动
            step = current <= target ? step : -step;
            //3.每次移动后的距离
            current += step;
            ////4.判断剩余的步数是否大于 step
           if(Math.abs(target - current) > Math.abs(step)){
               element.style.left = current + "px";
           }else{
               clearInterval(element.timeId);
               element.style.left = target + "px";

           }
        },20)
    }

    my$("btn1").onclick = function () {
        animate(my$("box"), 400);
    }
    my$("btn2").onclick = function () {
        animate(my$("box"), 800);
    }



</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            position: absolute;
            margin-top: 30px;
            left: 0px;

        }
    </style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    my$("btn2").onclick = function () {
        //只需要产生一个定时器, 可以先清理定时器, 再设置
        clearInterval(this.timeId);
        this.timeId = setInterval(function () {
            //1.获取div当前的位置--->看成盒子当前的left值
            var current = my$("box").offsetLeft;//400
            //2.div每一次移动多少像素 = 10 即步数
            var step = 10;
            //3.每次移动后的距离
            current += step;
            //4.判断移动后的位置是否达到目标位置
            if(current <= 800){
                my$("box").style.left = current + "px";
            }else{
                //清理定时器
                clearInterval(this.timeId);
            }

        },30)

    }
    //封装匀速动画函数--->任意一个元素移动到指定的目标位置
    //@params : 元素  目标位置
    function animate(element,target ) {
        //先清理定时器
        clearInterval(element.timeId)
        element.timeId = setInterval(function () {
            //1.获取div当前的位置--->看成盒子当前的left值
            var current = element.offsetLeft;//number类型
            //2.div每一次移动多少像素 = 10 即步数
            var step = 7;
            //2.1判断往哪边移动
            step = current <= target ? step : -step;
            //3.每次移动后的距离
            current += step;
            ////4.判断剩余的步数是否大于 step
           if(Math.abs(target - current) > Math.abs(step)){
               element.style.left = current + "px";
           }else{
               clearInterval(element.timeId);
               element.style.left = target + "px";

           }
        },20)
    }

    my$("btn1").onclick = function () {
        animate(my$("box"), 400);
    }
    my$("btn2").onclick = function () {
        animate(my$("box"), 800);
    }



</script>
</body>
</html>

 

标签:function,动画,封装,timeId,element,current,step,my,匀速
来源: https://www.cnblogs.com/Ironman725/p/10928047.html