Code666 (代码贴、代码片段)

[JavaScript] 单定时器多物体运动框架 →→→→→进入此内容的聊天室

来自 , 2020-08-23, 写在 JavaScript, 查看 151 次.
URL http://www.code666.cn/view/9b70e8fe
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>单定时器多物体运动框架</title>
  6.                 <style type="text/css">
  7.                         div{
  8.                                 width: 100px;
  9.                                 height: 50px;
  10.                                 background: red;
  11.                                 margin: 10px;
  12.                         }
  13.                 </style>
  14.         </head>
  15.         <body>
  16.                 <div></div>
  17.                 <div></div>
  18.                 <div></div>
  19.                 <script type="text/javascript">
  20.                             window.onload=function(){
  21.                                 var aDiv=document.getElementsByTagName('div');
  22.                                 for(var i=0;i<aDiv.length;i++){
  23.                                         aDiv[i].onmouseover=function(){
  24.                                                 startMove(this,400);
  25.                                         }      
  26.                                                 aDiv[i].onmouseout=function(){
  27.                                                 startMove(this,100);
  28.                                         }      
  29.                                 }
  30.                         };
  31.                        
  32.                        
  33.                         var timer=null;
  34.                         function startMove(obj,iTarget){
  35.                                 clearInterval(timer);
  36.                                 timer=setInterval(function(){
  37.                                         var speed=(iTarget-obj.offsetWidth)/6;
  38.                                         speed=speed>0?Math.ceil(speed):Math.floor(speed);
  39.                                         if(obj.offsetWidth==iTarget){
  40.                                                 clearInterval(timer);
  41.                                         }else{
  42.                                                 obj.style.width=obj.offsetWidth+speed+'px';
  43.                                         }
  44.                                 },30);
  45.                         }      
  46.                 </script>
  47.         </body>
  48. </html>

回复 "单定时器多物体运动框架"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666