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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
js微信分享接口调用详解
Jul 23 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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
关于PHP堆栈与列队的学习
2013/06/21 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
vue之延时刷新实例
2019/11/14 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
Python中的__slots__示例详解
2017/07/06 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
分析python请求数据
2018/08/19 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python 画出来六维图
2019/07/26 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
自荐信格式简述
2014/01/25 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
客服专员岗位职责
2015/02/10 职场文书
实习护士自荐信
2015/03/25 职场文书
致青春观后感
2015/06/09 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
利用Redis实现点赞功能的示例代码
2022/06/28 Redis