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 相关文章推荐
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jQuery设置指定网页元素宽度和高度的方法
Mar 25 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
js自制图片放大镜功能
Jan 24 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 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 fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
深入理解node.js http模块
2018/01/24 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
python中的yield使用方法
2014/02/11 Python
python基础教程之对象和类的实际运用
2014/08/29 Python
Python 操作文件的基本方法总结
2017/08/10 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
单位实习证明怎么写
2014/01/17 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
社区端午节活动总结
2015/02/11 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫