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实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
vue组件学习教程
Sep 09 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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
Session的工作方式
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
php多文件上传下载示例分享
2014/02/20 PHP
新手入门常用代码集锦
2007/01/11 Javascript
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
python opencv人脸检测提取及保存方法
2018/08/03 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
什么是python的id函数
2020/06/11 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
竞选大队委员演讲稿
2014/04/28 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
杨善洲电影观后感
2015/06/04 职场文书
市场营销计划书
2019/04/24 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android