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 相关文章推荐
eval与window.eval的差别分析
Mar 17 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
webpack开发跨域问题解决办法
Aug 03 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
PHP 时间日期操作实战
2011/08/26 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
深入浅出php socket编程
2015/05/13 PHP
培养自己的php编码规范
2015/09/28 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
php图片添加水印例子
2016/07/20 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
numpy中矩阵合并的实例
2018/06/15 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
估算杭州有多少软件工程师
2015/08/11 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
身边的榜样活动方案
2014/08/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
歌剧魅影观后感
2015/06/05 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
php中pcntl_fork详解
2021/04/01 PHP
Go语言中的UTF-8实现
2021/04/26 Golang
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python
使用Django框架创建项目
2022/06/10 Python