码迷,mamicode.com
首页 > Web开发 > 详细

JS之缓冲动画

时间:2017-02-03 15:48:44      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:utf-8   java   ima   ack   add   gif   offset   window   tar   

技术分享

原素材

技术分享

 

main.html

 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;//这个是运动的前提
}

 

JS之缓冲动画

标签:utf-8   java   ima   ack   add   gif   offset   window   tar   

原文地址:http://www.cnblogs.com/yi-mi-yangguang/p/6362648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!