JS实现侧边栏鼠标经过弹出框+缓冲效果
前端之家收集整理的这篇文章主要介绍了
JS实现侧边栏鼠标经过弹出框+缓冲效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
可能这个标题起得不够恰当，简单来说就是：当鼠标移到最左侧时，移出一个框。
首先，我们用两个div来简单布局以下页面：
这个分享框的弹出原理是：
把内层div定位到外层div最右侧紧贴，然后把外层div定位到屏幕左外测，left的值与宽度相等，刚好隐藏掉就可以。当鼠标经过时，再通过改变left的值使外层div
显示出来。
Box=document.getElementById('
Box');
var oShare=document.getElementById('share');
var timer=null; //定义一个空的定时器
function startmove(iTarget){
var speed=0; //定义步长
clearInterval(timer); //每次
调用函数后，先执行
关闭定时器的
代码，目的是防止多次操作导致计时器叠加出现变速的Bug
timer=setInterval(function(){
if(o
Box.offsetLeft
调用函数中传入，当盒子左边距小于目标值时，说明还没移动到指定位置，让步长=10，往右运动
speed=10;
}
else{ //否则就是超过了目标值，让步长=-10，往左运动
speed=-10;
}
if(oBox.offsetLeft==iTarget){ //当盒子左边距等于目标值时，就关闭计时器
clearInterval(timer);
}
else{
oBox.style.left=oBox.offsetLeft+speed+'px'; //盒子左边的距离，即移动的距离，注意加上单位；这个else分支也解决了一个bug:当满足条件停下来后，继续点击还会运动，所以加上else分支
}
},30)
}
//函数调用
oBox.onmouSEOver=function(){
startmove(0);
}
oBox.onmouSEOut=function(){
startmove(-200);
}
}
这里要注意的几个点：
1、分析清楚offsetLeft与目标值的关系，什么时候步长为正，什么时候步长为负；
2、offsetLeft获取出来不带单位，所以在设置left的值时要记得加上单位。
容易出现的几个bug：
1、在设置步长时，当步长不能被整除，在关闭计时器的条件上写==，会出现盒子运动不停的bug，改为>=或者修改步长来修复Bug；
2.3、在注释里说明。
原理：
根据计算出的步长进行运动，大于0向左运动，小于0向右运动。缓冲运动不仅视觉上更和谐，而且也更为方便。
0?Math.ceil(speed):Math.floor(speed);
//设置left的值
o
Box.style.left=o
Box.offsetLeft+speed+'px';
},30)
}
o
Box.onmouseenter=function(){
startmove(0);
}
o
Box.onmouseleave=function(){
startmove(-200);
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！
原文链接：https://www.f2er.com/js/40363.html
