javascript实现减速运动

最新推荐文章于 2022-07-05 15:17:14 发布

weixin_30750335

最新推荐文章于 2022-07-05 15:17:14 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mc67/p/5170105.html

本文介绍了如何使用JavaScript实现一个简单的减速运动效果，通过HTML、CSS和JavaScript代码演示了一个元素从一个位置移动到另一个位置的过程，并且实现了逐渐减慢的速度。代码中包括了基本的事件监听、元素定位操作和速度控制逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript实现减速运动

html：

  <input type="button"  value="start" onclick="show()"/>
 <div id="content">
 </div>

css：

 #content{
     height:100px;
     width:100px;
     background:green;
     position:absolute;
     top:100px;
     left:600px;
 }

javascript：

其实这里面有有些原理和“机关”，我都不讲了~，不是好难滴，自己领悟哈

   var Timer=null;
   var speed=0;
   var count=10;
  function showV(iTarget){
      var obj=document.getElementById("content");
      clearInterval(Timer);
      Timer=setInterval(function (){
       speed=(iTarget-obj.offsetLeft)/count;
       speed=speed>0?Math.ceil(speed):Math.floor(speed); //这里又很多机关，我都不多讲了
       if(Math.abs(obj.offsetLeft)==iTarget){
           clearInterval(Timer)
       }else{
          obj.style.left=obj.offsetLeft+speed+"px";   
       }
      },30)
  }
  function show(){
      showV(300);
  }