JS如何实现侧边栏鼠标经过弹出框+缓冲效果

 分享到

这个分享框的弹出原理是：把内层div定位到外层div最右侧紧贴，然后把外层div定位到屏幕左外测，left的值与宽度相等，刚好隐藏掉就可以。当鼠标经过时，再通过改变left的值使外层div显示出来。

 window.onload=function(){
 var oBox=document.getElementById('box');
 var oShare=document.getElementById('share');
 var timer=null; //定义一个空的定时器
 function startmove(iTarget){
 var speed=0; //定义步长
 clearInterval(timer); //每次调用函数后，先执行关闭定时器的代码，目的是防止多次操作导致计时器叠加出现变速的Bug
 timer=setInterval(function(){
  if(oBox.offsetLeft

这里要注意的几个点：

1、分析清楚offsetLeft与目标值的关系，什么时候步长为正，什么时候步长为负；

2、offsetLeft获取出来不带单位，所以在设置left的值时要记得加上单位。

容易出现的几个bug：

1、在设置步长时，当步长不能被整除，在关闭计时器的条件上写==，会出现盒子运动不停的bug，改为>=或者修改步长来修复Bug；

2.3、在注释里说明。

缓冲效果

原理：根据计算出的步长进行运动，大于0向左运动，小于0向右运动。缓冲运动不仅视觉上更和谐，而且也更为方便。

 window.onload=function(){
 var oBox=document.getElementById('box');
 var timer=null;
 function startmove(iTarget){
  clearInterval(timer);
  timer=setInterval(function(){
  //求步长，为正向右移动，为负向左移动，10为自定义
  var speed=(iTarget-oBox.offsetLeft)/10; 
  //对步长取整，大于0向上取整，小于0向下取整，原因就是正数越来越大，负数越来越小
  speed=speed>0?Math.ceil(speed):Math.floor(speed); 
  //设置left的值
  oBox.style.left=oBox.offsetLeft+speed+'px';
  },30)
 }
 oBox.onmouseenter=function(){
  startmove(0);
 }
 oBox.onmouseleave=function(){
  startmove(-200);
 }
 }

以上是“JS如何实现侧边栏鼠标经过弹出框+缓冲效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！