1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

JS运动效果的碰壁运动之投掷碰壁

投掷碰壁:如果一个物体向空中投掷出去,会呈现一个抛物线的效果,最终经过与地面碰撞多次后停止

投掷碰撞效果是x轴和y轴的合效果。x轴做匀速运动,当物体碰到地面后,x轴速度发生损耗;y轴做匀加速运动,当物体碰到地面后,y轴速度同样发生损耗

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>    	</head>  <body>  <div id="test" style="height: 50px;width: 50px;background:lightblue;position:absolute;top:200px;left:20px;border-radius:50%;"></div>  <button id="btn1">开始运动</button>  <button id="btn2">还原</button>  <script>  document.onmousedown = function(){      return false;  }  btn1.onclick = function(){      collisionMove({          obj:test      })  }  btn2.onclick = function(){      history.go();  }  function getCSS(obj,style){      if(window.getComputedStyle){          return getComputedStyle(obj)[style];      }      return obj.currentStyle[style];  }    function collisionMove(json){      var obj = json.obj;      var fn = json.fn;      //声明y轴的当前值      var curY = parseFloat(getCSS(obj,'top'));      //声明offset高      var offsetHeight = obj.offsetHeight;      //声明元素活动区域高      var activeHeight = json.activeHeight;      //元素获取区域宽高默认值为可视区域高      activeHeight = Number(activeHeight) || document.documentElement.clientHeight;      //声明x、y轴的步长值      var stepY = -50;      var stepX = 10;      //声明top、left样式值      var top;      var left;      //声明减速系数      var k = 0.8;      //声明碰撞次数      var i = 0;      //清除定时器      if(obj.timer){return;}       //开启定时器      obj.timer = setInterval(function(){          //获取x、y轴的当前值          curX = parseFloat(getCSS(obj,'left'));          curY = parseFloat(getCSS(obj,'top'));          //更新步长值stepY          stepY+= 5;          //更新top、left值          top = curY + stepY;          left = curX + stepX;          //下侧碰壁前一刻,步长大于剩余距离,且元素向下运动时          if(top > activeHeight - offsetHeight){              top = activeHeight - offsetHeight;          }          obj.style.top = top + 'px';          obj.style.left = left + 'px';          //下侧碰撞瞬间,改变运动方向,并产生速度损耗          if(top == activeHeight - offsetHeight){              //若碰撞10次后,则停止运动              i++;              if(i== 10){                  clearInterval(obj.timer)                  obj.timer = 0;                  fn && fn.call(obj);              }              //速度损耗              stepY = -stepY * k;              stepX = stepX * k;          }      },20);              }  </script>      </body>  </html>

原文链接:https://www.qiquanji.com/post/7055.html

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: