js实现基础运动

首先我定义3个div每个div当我鼠标放上去的时候，他的宽度就表达，如下图

首先是样式和html代码

 1 <style>
 2     div{
 3         width:100px;
 4         height:50px;
 5         background:red;
 6         margin-bottom:10px;
 7     }
 8 </style>
 9 
10 <body>
11     <div></div>
12     <div></div>
13     <div></div>
14 </body>

js代码如下，带注释

 1 <script>
 2 //重点是给每个对象加个定时器
 3     window.onload=function()
 4     {
 5         var div1= document.getElementsByTagName('div');  //获取每个div
 6         
 7         for(var i=0;i<div1.length;i++)  //当移到哪个div，哪个div发生变化
 8         {
 9             div1[i].timer=null;     //首先将定时器清空以免发生其他问题
10             div1[i].onmouseover=function()
11             {   
12                 startMove(this,400);
13             };
14             div1[i].onmouseout=function()
15             {
16                  startMove(this,100);  
17             };
18         }
19     };
20     
21     function startMove(obj,iTarget)
22     {
23        clearInterval(obj.timer);
24        obj.timer=setInterval(
25         function()
26         {
27             var speed=(iTarget-obj.offsetWidth)/5;  // 定义速度
28           
29             speed=speed>0?Math.ceil(speed):Math.floor(speed);  //速度去上限的限
30             if (obj.offsetWidth==iTarget)    //如果宽度已经增加到需要的宽度。停止计时器
31             {
32                 clearInterval(obj.timer);
33             }
34             else         //不断增加宽度直到到iTarget的值
35             {
36                 obj.style.width=obj.offsetWidth+speed+'px';
37             }
38 
39         }
40         , 30)
41     }
42 </script>
43

 

感觉不难，重点进入函数都得清理一下定时器

posted @ 2016-09-07 19:44  MrPat  阅读(333)  评论(0)  编辑  收藏  举报