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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
node 版本切换的实现
Feb 02 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 Javascript
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
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
prototype class详解
2006/09/07 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
VUE实现强制渲染,强制更新
2019/10/29 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
python多重继承实例
2014/10/11 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
jupyter实现重新加载模块
2020/04/16 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
四风之害观后感
2015/06/09 职场文书
旷工检讨书大全
2015/08/15 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技