JS之缓冲动画

原素材

main.html

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <link href="main.css" rel="stylesheet">

         <script type="text/javascript" src='main.js'></script>

             <meta charset="utf-8">

                 <title>

                     Document

                 </title>

             </meta>

         </link>

     </head>

     <body>

         <div id="div1">

         </div>

     </body>

 </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:;

    padding:;

}

#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之缓冲动画

最新文章

热门文章