期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

JS弹性运动

弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复。

弹性运动会出现有如下几个问题:

1、无法到达指定位置-----小数误差问题

2、如何解决?速度无法取整,使用变态方法----将要改变的值设置成变量

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  </head>  <body>  <button id="btn1">开始运动</button>  <button id="btn2">暂停</button>  <button id="reset">还原</button>  <div id="test" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;top: 30px;border-radius:50%"></div>  <script>  function getCSS(obj,style){      if(window.getComputedStyle){          return getComputedStyle(obj)[style];      }      return obj.currentStyle[style];  }    reset.onclick = function(){history.go();}  btn2.onclick = function(){      clearInterval(test.timer);  }  //声明步长值stepY、stepX  var stepY = 30;  var stepX = 10;  btn1.onclick = function(){      //声明当前值curY、curX      var curY,curX;      //声明目标值      var targetY = parseFloat('400px');      clearInterval(test.timer);      test.timer = setInterval(function(){             //更新当前值          curY = parseFloat(getCSS(test,'top'));          curX = parseFloat(getCSS(test,'left'));          //更新步长值          stepY -= 1;          //当元素返回到初始高度时          if(stepY == -30){              stepY = 29;              stepX = -stepX;          }                  //更新top、left值          test.style.top = curY + stepY + 'px';          test.style.left = curX + stepX + 'px';        },20);  }  </script>      </body>  </html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册