JS+HTML5手机开发之滚动和惯性缓动实现方法分析


Posted in Javascript onJune 12, 2016

本文实例讲述了JS+HTML5手机开发之滚动和惯性缓动实现方法。分享给大家供大家参考,具体如下:

1. 滚动 以下是三种实现方式:

1) 利用原生的css属性 overflow: scroll div id= parent style = overflow:scroll; divid='content'内容区域/div /div Notice: 在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现

2)js 编程实现 思路:对比手指在屏幕上移动前后位置变化改变内容元素content

1. 滚动

以下是三种实现方式:

1) 利用原生的css属性 overflow: scroll

<div id="parent" style="overflow:scroll;>
  <div id='content'>内容区域</div>
</div>

Notice:

在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现

2)js 编程实现

思路:对比手指在屏幕上移动前后位置变化改变内容元素content的位置

第一步:设置parent的 overflow为hidden, 设置content的position为relative, top为0;

第二步:监听touch事件

var parent = document.getElementById('parent');
parent.addEventListener('touchstart', function(e) {
  // do touchstart
});
parent.addEventListener('touchmove', function(e) {
  // do touchmove
});
parent.addEventListener('touchend', function(e) {
  // do touchend
});

第三步:实现滚动代码

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById('parent');
var content = document.getElementById('content')
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置
parent.addEventListener('touchstart', function(e) {
  lastY = startY = e.touches[0].pageY;
});
parent.addEventListener('touchmove', function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
});
parent.addEventListener('touchend', function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
});

第四步:优化

上边代码在手机上运行效果相对PC上要卡很多

优化部分请参见:

3) 使用iScroll4框架

var scroll = new iScroll('parent', {
hScrollbar: false,
vScrollbar: true,
checkDOMChanges : true
});

框架官网:http://cubiq.org/iscroll-4

2.惯性缓动

思路:取手指最后一段时间在屏幕上划动的平均速度v,让v按一个递减函数变化,直到不能移动或v<=0

/**
 * 这里只实现垂直滚动
 */
var parent = document.getElementById('parent');
var content = document.getElementById('content')
var startY = 0; // 初始位置
var lastY = 0; // 上一次位置
/**
 * 用于缓动的变量
 */
var lastMoveTime = 0;
var lastMoveStart = 0;
var stopInertiaMove = false; // 是否停止缓动
parent.addEventListener('touchstart', function(e) {
  lastY = startY = e.touches[0].pageY;
  /**
   * 缓动代码
   */
  lastMoveStart = lastY;
  lastMoveTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
});
parent.addEventListener('touchmove', function(e) {
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  // 设置top值移动content
  content.style.top = (parseInt(contentTop) + moveY) + 'px';
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  stopInertiaMove = true;
  if(nowTime - lastMoveTime > 300) {
    lastMoveTime = nowTime;
    lastMoveStart = nowY;
  }
});
parent.addEventListener('touchend', function(e) {
  // do touchend
  var nowY = e.touches[0].pageY;
  var moveY = nowY - lastY;
  var contentTop = content.style.top.replace('px', '');
  var contentY = (parseInt(contentTop) + moveY);
  // 设置top值移动content
  content.style.top = contentY + 'px';
  lastY = nowY;
  /**
   * 缓动代码
   */
  var nowTime = e.timeStamp || Date.now();
  var v = (nowY - lastMoveStart) / (nowTime - lastMoveTime); //最后一段时间手指划动速度
  stopInertiaMove = false;
  (function(v, startTime, contentY) {
    var dir = v > 0 ? -1 : 1; //加速度方向
    var deceleration = dir*0.0006;
    var duration = v / deceleration; // 速度消减至0所需时间
    var dist = v * duration / 2; //最终移动多少
    function inertiaMove() {
      if(stopInertiaMove) return;
      var nowTime = e.timeStamp || Date.now();
      var t = nowTime-startTime;
      var nowV = v + t*deceleration;
      // 速度方向变化表示速度达到0了
      if(dir*nowV < 0) {
        return;
      }
      var moveY = (v + nowV)/2 * t;
      content.style.top = (contentY + moveY) + "px";
      setTimeout(inertiaMove, 10);
    }
    inertiaMove();
  })(v, nowTime, contentY);
});

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 #Javascript
JQuery的attr 与 val区别
Jun 12 #Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 #Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 #Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
You might like
mysql 搜索之简单应用
2007/04/27 PHP
PHP校验ISBN码的函数代码
2011/01/17 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
禁止F5等快捷键的JS代码
2007/03/06 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
javascript数组的使用
2013/03/28 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
常用的js方法合集
2017/03/10 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
apicloud拉起小程序并传递参数的方法示例
2018/11/21 Javascript
puppeteer库入门初探
2019/01/09 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python使用心得之获得github代码库列表
2014/06/25 Python
python字符串连接方式汇总
2014/08/21 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python进程池Pool应用实例分析
2019/11/27 Python
PyTorch中permute的用法详解
2019/12/30 Python
django 取消csrf限制的实例
2020/03/13 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
中学生期末评语
2014/02/03 职场文书
小学生综合素质评语
2014/04/23 职场文书
见习报告的格式
2014/11/04 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
Python WSGI 规范简介
2021/04/11 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL