简单几句代码写个缓冲运动

最新推荐文章于 2024-03-28 22:11:39 发布

原创最新推荐文章于 2024-03-28 22:11:39 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #缓冲运动 #运动

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

看代码

<!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>缓冲运动</title>
    <style>
        html, body{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 50px;
            left: 1000px;
        }
        .line{
            width: 1px;
            height: 200px;
            background: black;
            position: absolute;
            left: 500px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="line"></div>
    <button>start</button>
</body>
<script>
    var oBox = document.querySelector('.box');
    var btn = document.querySelector('button');

    btn.onclick = function(){
        // move(oBox, 'left', 500);
        $('.box').animate({
            'left': 500,
            'top': 300,
            'width': 300
        });
    }
    //运动
    function move(el, dir, target){
        var timer = setInterval(function(){
            var start = parseInt(getStyle(el, dir));
            var speed = (target - start)/10;    //缓冲即速度与位移差成正比
            if(speed == 0){
                clearInterval(timer);
            }
            speed = (target-start)>0 ? Math.ceil(speed) : Math.floor(speed);//速度为小数时带来的问题
            console.log(speed);
            el.style[dir] = start + speed + 'px';
        }, 17)
    }
    //获取样式
    function getStyle(el, attr){
        return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];
    }

    //类jQuery封装
    function JQ(arg){
        this.el = document.querySelector(arg);
    }

    JQ.prototype.animate = function(options){
        for(var key in options){
            move(this.el, key, parseInt(options[key]));
        }
    }

    function $(arg){
        return new JQ(arg);
    }
</script>
</html>