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

2024-02-26 15:52:03 184

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

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

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

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

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！

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

热门推荐

随机推荐