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 写类方式之一
Jul 05 Javascript
javascript 写类方式之八
Jul 05 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
axios实现简单文件上传功能
Sep 25 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 获取全局变量的代码
2011/04/21 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
Codeigniter发送邮件的方法
2015/03/19 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
python实现决策树分类(2)
2018/08/30 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python实现QQ批量登录功能
2019/06/19 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
最新大学生自我评价
2013/09/24 职场文书
公司前台接待岗位职责
2013/12/03 职场文书
服装店营销方案
2014/03/10 职场文书
大学社团计划书
2014/05/01 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
Redis分布式锁的7种实现
2022/04/01 Redis