弹性运动

最新推荐文章于 2022-01-27 13:42:33 发布

djrk76507

最新推荐文章于 2022-01-27 13:42:33 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/qibingshen/p/5281572.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   #div1{width: 100px; height: 100px; background: red; position: absolute; top: 50px; left: 0px;}
   </style>
   <script type="text/javascript">
           var iSpeed=0;
           var timer=null;
           var left=0;
           function startMove(obj,iTarget){

               clearInterval(obj.timer);
               obj.timer=setInterval(function(){
                   /*
                   if(oDiv.offsetLeft<300){
                       iSpeed+=(300-oDiv.offsetLeft)/50;
                   }else {
                       iSpeed-=(oDiv.offsetLeft-300)/50;
                   }*/
                   //因为if里边的判断可以化简，所有为
                   iSpeed+=(iTarget-obj.offsetLeft)/5;
                   iSpeed*=0.7; //乘以小数，让时间慢慢变小

                   left+=iSpeed; //引入一个外部变量将误差每次累计起来

                   if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //当速度的绝对值小于1 并且边距和目标的差小于1时就停止
                       clearInterval(obj.timer);
                       obj.style.left=iTarget+'px'; //停止定时器并手动移动到指定的位置
                   }else{
                       obj.style.left=left+'px';
                   }


               },30);
           };

   </script>
</head>
<body>
   <input type="button" value="开始运动" οnclick="startMove(document.getElementById('div1'),'300')" />
   <div id="div1"></div>
   <div style="position: absolute; width: 1px; height: 300px; left: 300px; top:0; background: black;"></div>
</body>
</html>

转载于:https://www.cnblogs.com/qibingshen/p/5281572.html

djrk76507

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1{width: 100px; height: 100p...
复制链接

扫一扫

弹性运动

“相关推荐”对你有帮助么？