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

JS拖拽碰壁实现效果

实际情况下,一个物体默认具有重力效果。物体的重力效果是时时刻刻都在发生的,相当于定时器的每次运动,都有向下的匀加速运动

如果投掷速度不同,则运动速度也不相同。在碰壁的情况下,速度会有损耗,并且发生速度方向变化。最终,物体会落到地上

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  		<style type="text/css">  #nav{      list-style:none;      padding: 0;      margin: 0 50px 0;      text-align:center;      color:white;      font-weight:bold;      background-color: #25517A;      cursor:pointer;      overflow:hidden;      width: 500px;  }      .navItem{      line-height: 30px;      float:left;      width:100px;      text-decoration: none;      color:inherit;  }  #navActive{      width: 100px;      height: 30px;      background-color: rgba(0,0,0,0.3);      position:absolute;      margin-top: -30px;      cursor:pointer;  }  </style>  </head>  <body>  <body>  <div id="test" style="height: 100px;width: 100px;border-radius:50%;background:pink;position:absolute;top:40px;left:0;"></div>  <script>  //声明元素投掷步长值  var stepX=0,stepY=0;  //默认情况下,也存在重力效果  collisionMove({      obj:test,      stepX:stepX,      stepY:stepY  })  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;      //声明x、y轴的当前值      var curX = parseFloat(getCSS(obj,'left'));      var curY = parseFloat(getCSS(obj,'top'));      //声明x、y轴的步长值      var stepX = json.stepX;      var stepY = json.stepY;         //声明元素的重要加速度         var g = json.g || 3;      //步长值默认值为10      if(isNaN(Number(stepX))){          stepX = 10;      }else{          stepX = Number(stepX);      }      if(isNaN(Number(stepY))){          stepY = 10;      }else{          stepY = Number(stepY);      }      //声明x、y轴方向      var dirX = json.dirX;      var dirY = json.dirY;      dirX = stepX > 0 ? '+' : '-';      dirY = stepY > 0 ? '+' : '-';      //声明offset宽高      var offsetWidth = obj.offsetWidth;      var offsetHeight = obj.offsetHeight;      //声明元素活动区域宽高      var activeWidth = json.activeWidth;      var activeHeight = json.activeHeight;      //元素获取区域宽高默认值为可视区域宽高      activeWidth = Number(activeWidth) || document.documentElement.clientWidth;      activeHeight = Number(activeHeight) || document.documentElement.clientHeight;      //声明left、top样式值      var left;      var top;      //声明减速系数      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 += g;          //更新left、top值          left = curX + stepX;          top = curY + stepY;          //右侧碰壁前一刻,步长大于剩余距离,且元素向右运动时          if((left > activeWidth - offsetWidth) && (dirX == '+')){              left = activeWidth - offsetWidth;          }          //左侧碰壁前一刻,步长大于剩余距离,且元素向左运动时          if((Math.abs(stepX) > curX) && (dirX == '-')){              left = curX;          }          //下侧碰壁前一刻,步长大于剩余距离,且元素向下运动时          if((top > activeHeight - offsetHeight) && (dirY == '+')){              top = activeHeight - offsetHeight;          }          //上侧碰壁前一刻,步长大于剩余距离,且元素向上运动时          if((Math.abs(stepY) > curY) && (dirY == '-')){              top = curY;          }          obj.style.left= left + 'px';          obj.style.top = top + 'px';          //左侧或右侧碰撞瞬间          if(left == activeWidth - offsetWidth || left == curX){              //x轴方向速度损耗,并发生方向变化              stepX = -stepX * k;          }          //上侧或下侧碰撞瞬间          if(top == activeHeight - offsetHeight || top == curY){              //y轴方向速度损耗,并发生方向变化              stepY = -stepY * k;              //x轴方向速度损耗              stepX = stepX * k;          }          //元素与地面碰撞10次后,则停止运动          if(top == activeHeight - offsetHeight){              i++;              if(i== 10){                  clearInterval(obj.timer)                  obj.timer = 0;                  fn && fn.call(obj);              }                      }          //更新运动方向          dirX = stepX > 0 ? '+' : '-';          dirY = stepY > 0 ? '+' : '-';      },20);              }      //初始抛掷  test.onmousedown = function(e){      e = e || event;      //声明上一次mousemove事件的坐标位置      var lastX2 = e.clientX;      var lastY2 = e.clientY;      //获取元素距离定位父级的x轴及y轴距离      var x0 = this.offsetLeft;      var y0 = this.offsetTop;      //获取此时鼠标距离视口左上角的x轴及y轴距离      var x1 = e.clientX;      var y1 = e.clientY;      //鼠标按下时,获得此时的页面区域      var L0 = 0;      var R0 = document.documentElement.clientWidth;      var T0 = 0;      var B0 = document.documentElement.clientHeight;      //鼠标按下时,获得此时的元素宽高      var EH = this.offsetHeight;      var EW = this.offsetWidth;      document.onmousemove = function(e){          e = e || event;          //获取此时鼠标距离视口左上角的x轴及y轴距离          var x2 = e.clientX;          var y2 = e.clientY;           stepX = x2 - lastX2;          stepY = y2 - lastY2;            lastX2 = e.clientX;          lastY2 = e.clientY;          //计算此时元素应该距离视口左上角的x轴及y轴距离          var X = x0 + (x2 - x1);          var Y = y0 + (y2 - y1);          /******范围限定*******/          //获取鼠标移动时元素四边的瞬时值          var L = X;          var R = X + EW;          var T = Y;          var B = Y + EH;          //在将X和Y赋值给left和top之前,进行范围限定          //只有在范围内时,才进行相应的移动          //如果脱离左侧范围,则left置L0          if(L < L0){X = L0;}          //如果脱离右侧范围,则left置为R0          if(R > R0){X = R0 - EW;}          //如果脱离上侧范围,则top置T0          if(T < T0){Y = T0;}          //如果脱离下侧范围,则top置为B0          if(B > B0){Y = B0 - EH;}          //将X和Y的值赋给left和top,使元素移动到相应位置          test.style.left = X + 'px';          test.style.top = Y + 'px';      }      document.onmouseup = function(e){          e = e || event;          var maxHeight = document.documentElement.clientHeight - test.offsetHeight;          var maxWidth = document.documentElement.clientWidth - test.offsetWidth;          //以设置的投掷速度来进行碰撞运动          collisionMove({              obj:test,              stepX:stepX,              stepY:stepY          })          //当鼠标抬起时,拖拽结束,则将onmousemove赋值为null即可          document.onmousemove = null;          //释放全局捕获          if(test.releaseCapture){              test.releaseCapture();          }      }      //阻止默认行为      return false;      //IE8-浏览器阻止默认行为      if(test.setCapture){          test.setCapture();      }  }  </script>  </body>  </html>

具体效果点上面的运行代码来看。静态效果图:

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

微信扫码关注

更新实时通知

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