JS之缓冲动画

Posted 2020-08-29 一米阳光!

tags:

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

原素材

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <link href="main.css" rel="stylesheet">
 5         <script type="text/javascript" src=\'main.js\'></script>
 6             <meta charset="utf-8">
 7                 <title>
 8                     Document
 9                 </title>
10             </meta>
11         </link>
12     </head>
13     <body>
14         <div id="div1">
15         </div>
16     </body>
17 </html>

main.js

window.onload = function() {
    var odiv1 = document.getElementById(\'div1\');//前面必须要是id的，如果为class就会报错
    odiv1.onmouseover = function() {
        startMove(700);
    };
    // odiv1.onmouseout = function() {
    //     startMove(0);
    // };
};
var timer = null;//设置一个计时器

function startMove(iTarget) {
    clearInterval(timer);//取消原有的计时器，防止叠加
    var odiv1 = document.getElementById(\'div1\');
    timer = setInterval(function() {
        var speed = (iTarget - odiv1.offsetLeft)/20;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整
        if (odiv1.offsetLeft == iTarget) {
            clearInterval(timer);//当达到目标是，停止
        } else {
            odiv1.style.left = odiv1.offsetLeft + speed + \'px\';
        }
    }, 30);
}

main.css

* {
    margin: 0;
    padding: 0;
}

#div1 {
    width: 480px;
    height: 120px;
    background:url(image/1.jpg) -440px -450px no-repeat;
    position: relative;//这个是运动的前提
}

background:url(image/1.jpg) -440px -450px no-repeat;   
若为正的则为距离左边，负的则为距图片左边440px

以上是关于JS之缓冲动画的主要内容，如果未能解决你的问题，请参考以下文章

OpenGL ES之“深度测试”与“模板测试”的使用流程

VSCode自定义代码片段——CSS动画