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


Posted in Javascript onMarch 29, 2017

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

首先,我们用两个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>

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

Javascript 相关文章推荐
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 #Javascript
js实现一个简单的数字时钟效果
Mar 29 #Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
Vue2组件tree实现无限级树形菜单
Mar 29 #Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 #Javascript
Vue.js 插件开发详解
Mar 29 #Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 #Javascript
You might like
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP中的类型约束介绍
2015/05/11 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
php修改数组键名的方法示例
2017/04/15 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
js实现tab切换效果
2017/02/16 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
Python 初始化多维数组代码
2008/09/06 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
浅谈python对象数据的读写权限
2016/09/12 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python 异或加密字符串的实例
2018/10/14 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
教师节主题班会教案
2015/08/17 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
倡议书怎么写?
2019/04/11 职场文书