欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-29 16:34:49
可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。 首先,我们用两个div来简单布局以下页面:
...

可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。

首先,我们用两个div来简单布局以下页面:

<div id="box">
 <div id="share">分享到</div>
</div>

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

<script type="text/javascript">
 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<itarget){ //目标值从事件调用函数中传入,当盒子左边距小于目标值时,说明还没移动到指定位置,让步长=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);
 }
}
</script>

这里要注意的几个点:

1、分析清楚offsetleft与目标值的关系,什么时候步长为正,什么时候步长为负;

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

容易出现的几个bug:

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

2.3、在注释里说明。

缓冲效果

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

<script type="text/javascript">
 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);
 }
 }
</script>

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