JS实现侧边栏鼠标经过弹出框+缓冲效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS实现侧边栏鼠标经过弹出框+缓冲效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2390字,纯文字阅读大概需要4分钟。
内容图文
![JS实现侧边栏鼠标经过弹出框+缓冲效果](/upload/InfoBanner/zyjiaocheng/345/2a22ff4e29f84d4d8d556a0f1b668aca.jpg)
可能这个标题起得不够恰当,简单来说就是:当鼠标移到最左侧时,移出一个框。
首先,我们用两个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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
内容总结
以上是互联网集市为您收集整理的JS实现侧边栏鼠标经过弹出框+缓冲效果全部内容,希望文章能够帮你解决JS实现侧边栏鼠标经过弹出框+缓冲效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。