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 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
javascript 小数取整简单实现方式
2014/05/30 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
JavaScript实现动态生成表格
2020/08/02 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python中为什么要用self探讨
2015/04/14 Python
python实现ID3决策树算法
2017/12/20 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python批量解压zip文件的方法
2019/08/20 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python中pdb模块实例用法
2021/01/15 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
外贸公司实习自我鉴定
2013/09/24 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
驾驶员培训方案
2014/05/01 职场文书
党员个人剖析材料
2014/09/30 职场文书
2014年政教处工作总结
2014/12/20 职场文书
光荣之路观后感
2015/06/12 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers