JavaScript运动框架 解决防抖动问题、悬浮对联(二)


Posted in Javascript onMay 17, 2017

本文实例是对JavaScript运动框架(一)的应用

scrollTop:有时候网页很长,其高度大于显示器高度,会产生滚动,那么在高度方向上,“滚走”的部分就是scrollTop

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

offsetTop:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

JavaScript运动框架 解决防抖动问题、悬浮对联(二)

图中,黑色框是网页文档,其高度:document.documentElement.scrollHeight;

绿色框是当前可见的客户区部分(不包括工具条,状态栏之类的),红色方框是要固定在客户区正中央的对联,假如网页高度很高,用户不停的滚动,要求对联以缓冲运动的形式保持在客户区右侧中央,(postion:fixed;可以做到,而且非常稳定的做到,滚动网页,div纹丝不动的焊在那里)。

但我们想让它运动性的最后落脚在目标位置:

1:可以直接计算好位置,硬赋值;
2:缓冲运动到目标位置,效果更柔和。
一般不用第一种硬来,因为视觉效果很差,很生硬。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>运动框架(二)</title>
 <style type="text/css">
  * {
   padding: 0;
   margin: 0;
  }
  #div1 {
   width: 100px;
   height: 200px;
   background: orange;
   position: absolute;
   right: 0;
  }
 </style>
</head>
<body style="height: 30000000px;">
 <div id="div1"></div>
 <script type="text/javascript">
  var oDiv = document.getElementById('div1');
  var timer = null;
  window.onscroll = function() {
   //每次滚动网页,都要重新计算目标值,当前值就是offsetTop
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;
   //下面是硬赋值,计算好位置后,直接将值付给style.top,太生硬
   //oDiv.style.top = target;

   startMove(target);
  };
  function startMove(iTarget) {
   clearInterval(timer);
   timer = setInterval(function() {
    var speed = (iTarget - oDiv.offsetTop) / 10;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (iTarget == oDiv.offsetTop) {
     clearInterval(timer);
    } else {
     oDiv.style.top = oDiv.offsetTop + speed + 'px';
     document.title = iTarget + ',' + oDiv.offsetTop;
    }
   }, 30);
  }
 </script>
</body>
</html>

运行结果却有问题,对联不停地抖动,一上一下的抖动,也就是offsetTop不停的来回变化,如下两个图所示:

JavaScript运动框架 解决防抖动问题、悬浮对联(二)

JavaScript运动框架 解决防抖动问题、悬浮对联(二)

观察上面两个图,看title,计算出来的目标值是小数:267.5px,也就是对联最后应该停留的style.top值,speed = (267.5 - 267)/10 ?> 1 , 跨1px到 268,
speed = (267.5 - 268)/10 ?> -1,退1px,到267,始终到不了267.5的目标值,上一篇文章中让速度只能取整,并且计算机也不走小数个px,所以始终到不了267.5,就这么僵持着:跨一步,过了,退一步,狠了!来回抖动!
怎么解决,很简单,不允许目标值是个小数:取整!

var target = (document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop;

改为:

var target = parseInt((document.documentElement.clientHeight - oDiv.offsetHeight)/2 + scrollTop);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript隐藏控件的方法
Sep 21 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
May 28 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
vue之nextTick全面解析
May 17 #Javascript
Vue.js学习教程之列表渲染详解
May 17 #Javascript
JavaScript运动框架 解决速度正负取整问题(一)
May 17 #Javascript
深入理解Commonjs规范及Node模块实现
May 17 #Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
May 17 #Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 #Javascript
Angular.JS中的this指向详解
May 17 #Javascript
You might like
PHP 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python版大富翁源代码分享
2018/11/19 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
八年级语文教学反思
2014/02/11 职场文书
社团活动总结
2014/04/28 职场文书
北京奥运会主题口号
2014/06/13 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
先进党支部申报材料
2014/12/24 职场文书
面试复试通知单
2015/04/24 职场文书
教师远程培训心得体会
2016/01/09 职场文书