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使用append(content)方法注意事项分享
Jan 06 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 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
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php二分查找二种实现示例
2014/03/12 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
js 字符串操作函数
2009/07/25 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python实现括号匹配方法详解
2020/02/10 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
Python 内存管理机制全面分析
2021/01/16 Python
公司委托书范本
2014/04/04 职场文书
基层工作经验证明样本
2014/11/16 职场文书
会议承办单位欢迎词
2019/07/09 职场文书