Code666 (代码贴、代码片段)

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

来自 , 2020-04-13, 写在 JavaScript, 查看 108 次.
URL http://www.code666.cn/view/9a96876e
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title>单物体运动框架</title>
  6.                 <style type="text/css">
  7.                         #div1{
  8.                                 width: 100px;
  9.                                 height: 100px;
  10.                                 background: red;
  11.                                 position: absolute;
  12.                 left:800px;
  13.                 top: 50px;
  14.                         }
  15.                         #div2{
  16.                                 width: 1px;
  17.                                 height: 300px;
  18.                                 background: black;
  19.                                 position: absolute;
  20.                                 left: 200px;
  21.                                 top: 0;
  22.                         }
  23.                         #div3{
  24.                                 width: 1px;
  25.                                 height: 300px;
  26.                                 background: black;
  27.                                 position: absolute;
  28.                                 left: 500px;
  29.                                 top: 0;
  30.                         }
  31.                 </style>
  32.                
  33.         </head>
  34.         <body>
  35.                 <input type="button" value="到200" onclick="startMove(200)" />
  36.                 <input type="button" value="到500" onclick="startMove(500)" />
  37.                 <div id="div1"></div>
  38.                 <div id="div2"></div>
  39.                 <div id="div3"></div>
  40.                 <script type="text/javascript">
  41.                         var timer=null;
  42.                         function startMove(iTarget){
  43.                                 var oDiv=document.getElementById('div1');
  44.                                 clearInterval(timer);
  45.                           timer=setInterval(function(){
  46.                                         var speed=0;
  47.                                 if(iTarget>oDiv.offsetLeft){
  48.                                         speed=7;
  49.                                 }else{
  50.                                         speed=-7;
  51.                                 }
  52.                                 if(Math.abs(iTarget-oDiv.offsetLeft)<=7){
  53.                                         clearInterval(timer);
  54.                                         oDiv.style.left=iTarget+'px';
  55.                                 }else{
  56.                                 oDiv.style.left=oDiv.offsetLeft+speed+'px';
  57.                                 }
  58.                             },30);
  59.                         }
  60.                 </script>
  61.         </body>
  62. </html>

回复 "单物体运动框架"

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

captcha

贴代码片段 - Code666