缓速运动封装

Posted 2020-08-24 暗惧者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了缓速运动封装相关的知识，希望对你有一定的参考价值。

封装函数

    function animate(obj,endPosition) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var step = ( endPosition- obj.offsetLeft) /10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + ‘px‘;
            if(obj.offsetLeft == endPosition) {clearInterval(obj.timer)}
        },30)
    }

案例

<!DOCTYLE html>
<html>
<head>
    <meta charset="uft-8" />
    <style>
        #box {width:100px; height: 100px; background:#dfd; position:absolute; left:100px; top:100px;}
    </style>
</head>
<body>
<button id="btn1">200</button>
<button id="btn2">600</button>
<div id="box"></div>
</body>
</html>
<script>
    var btn1 = document.getElementById(‘btn1‘);
    var btn2 = document.getElementById(‘btn2‘);
    var box = document.getElementById(‘box‘);
    btn1.onclick = function () {
        animate(box,200)
    }
    btn2.onclick = function () {
        animate(box,600)
    }
    function animate(obj,endPosition) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var step = ( endPosition- obj.offsetLeft) /10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + ‘px‘;
            if(obj.offsetLeft == endPosition) {clearInterval(obj.timer)}//
            //用==不要用>=,否则，在该案例中，如果已经滚动到600位置，再次点击200，将不能回到200位置
            
        },30)
    }
    
</script>

以上是关于缓速运动封装的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段14——Vue的axios网络请求封装

js运动函数封装-色块变大且移动

回归 | js实用代码片段的封装与总结（持续更新中...）

VsCode 代码片段-提升研发效率