• ▸ PHP
• ▸ Java
• ▸ Java SE
• ▸ Python
• ▸ C#
• ▸ C&C++
• ▸ Ruby
• ▸ VB
• ▸ asp.Net
• ▸ Go
• ▸ Perl
• ▸ netty
• ▸ Django
• ▸ Delphi
• ▸ Jsp
• ▸ .NET Core
• ▸ Spring
• ▸ Flask
• ▸ Springboot
• ▸ SpringMVC
• ▸ Lua
• ▸ Laravel
• ▸ Mybatis
• ▸ Asp
• ▸ Groovy
• ▸ ThinkPHP
• ▸ Yii
• ▸ swoole
• ▸ HTML
• ▸ HTML5
• ▸ JavaScript
• ▸ CSS
• ▸ jQuery
• ▸ Bootstrap
• ▸ Angularjs
• ▸ TypeScript
• ▸ Vue
• ▸ Dojo
• ▸ Json
• ▸ Electron
• ▸ Node.js
• ▸ extjs
• ▸ Express
• ▸ XML
• ▸ ES6
• ▸ Ajax
• ▸ Flash
• ▸ Unity
• ▸ React
• ▸ Flex
• ▸ Ant Design
• ▸ Web前端
• ▸ 微信小程序
• ▸ 微信公众号
• ▸ iOS
• ▸ Android
• ▸ Swift
• ▸ Hybrid
• ▸ Cocos2d-x
• ▸ Flutter
• ▸ Xcode
• ▸ Silverlight
• ▸ cocoa
• ▸ Cordova

• 前端之家
• JavaScript
• JS实现侧边栏鼠标经过弹出框+缓冲效果

这个分享框的弹出原理是：@H_301_2@把内层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(oBox.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); } }

这里要注意的几个点：@H_301_2@

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

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

容易出现的几个bug：@H_301_2@

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

2.3、在注释里说明。

缓冲效果@H_301_2@

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

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); } }

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

原文链接：https://www.f2er.com/js/40363.html