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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
js实现一键复制功能
Mar 16 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
js canvas实现俄罗斯方块
Oct 11 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
php一些错误处理的方法与技巧总结
2013/08/10 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
将python图片转为二进制文本的实例
2019/01/24 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
解析Python3中的Import
2019/10/13 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
创先争优标语
2014/06/27 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
幼儿教师个人总结
2015/02/05 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers