zoukankan      html  css  js  c++  java
  • 匀速运动停止

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
     8 #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
     9 #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
    10 </style>
    11 <script>
    12 var timer=null;
    13 
    14 function startMove(iTarget)
    15 {
    16     var oDiv=document.getElementById('div1');
    17     
    18     clearInterval(timer);
    19     timer=setInterval(function (){
    20         var speed=0;
    21         
    22         if(oDiv.offsetLeft<iTarget)
    23         {
    24             speed=7;
    25         }
    26         else
    27         {
    28             speed=-7;
    29         }
    30         
    31         if(Math.abs(iTarget-oDiv.offsetLeft)<=7) //Math.abs绝对值
    32         {
    33             clearInterval(timer);
    34             
    35             oDiv.style.left=iTarget+'px';
    36         }
    37         else
    38         {
    39             oDiv.style.left=oDiv.offsetLeft+speed+'px';
    40         }
    41     }, 30);
    42 }
    43 </script>
    44 </head>
    45 
    46 <body>
    47 <input type="button" value="到100" onclick="startMove(100)" />
    48 <input type="button" value="到300" onclick="startMove(300)" />
    49 <div id="div1"></div>
    50 <div id="div2"></div>
    51 <div id="div3"></div>
    52 </body>
    53 </html>
  • 相关阅读:
    JSON.parse与eval
    加密算法
    asp.net权限管理
    asp.net登录状态验证
    U3D Debug.log的问题
    yield(C# 参考)
    U3D 动态创建Prefab的多个实例
    U3D事件系统总结
    C#事件与接口
    C#泛型委托,匿名方法,匿名类
  • 原文地址:https://www.cnblogs.com/52css/p/2961034.html
Copyright © 2011-2022 走看看