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 相关文章推荐
用于table内容排序
Jul 21 Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
requireJS使用指南
Apr 27 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
vue-axios使用详解
May 10 Javascript
js replace 全局替换的操作方法
Jun 12 Javascript
vue+elementUI实现图片上传功能
Aug 20 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
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
smarty中post用法实例
2014/11/28 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
phpinfo的知识点总结
2019/10/10 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JS判断数组那点事
2017/10/10 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
Python中Threading用法详解
2017/12/27 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
车间调度岗位职责
2013/11/30 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
会计专业求职信范文
2015/03/19 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis