首页 > 代码库 > js实现基础运动
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
感觉不难，重点进入函数都得清理一下定时器
js实现基础运动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。