HTML5手机开发——滚动和惯性缓动
1. 滚动
以下是三种实现方式:
1) 利用原生的css属性 overflow: scroll
<div id='content'>内容区域</div>
</div>
Notice:
在android 有bug, 滚动完后会回退到最顶端的内容区域,解决办法是使用后两种方式实现
2)js 编程实现
思路:对比手指在屏幕上移动前后位置变化改变内容元素content的位置
第一步:设置parent的 overflow为hidden, 设置content的position为relative, top为0;
第二步:监听touch事件
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);
});
本文来自zzm_justin的博客,原文地址:http://blog.csdn.net/zzm_justin/article/details/8476373
HTML5手机开发——滚动和惯性缓动的更多相关文章
- WPF中ListBox滚动时的缓动效果
原文:WPF中ListBox滚动时的缓动效果 上周工作中遇到的问题: 常规的ListBox在滚动时总是一格格的移动,感觉上很生硬. 所以想要实现类似Flash中的那种缓动的效果,使ListBox滚动时 ...
- JS实现缓动动画效果
原理如下: 假设要从数值A变化到数值B,如果是线性运动,则每次移动距离是一样:如果是缓动,每次移动距离不一样.那如何才能不一样呢?很简单,按比例移动就可以. 例如:每次移动剩余距离的一半. 对吧,超容 ...
- requestAnimationFrame之缓动的应用
之前需要使用的定时器的时,立马想到的是setInterval(),用着用着就成为习惯,并没有遇到什么不妥之处.习惯性的操作往往容易让一个人拒绝尝试一些其他的方法.现在的方法用得好好的,没事干啥找其他法 ...
- paip.提高效率---微信 手机app快速开发平台—微网络撬动大市场
paip.提高效率---微信 手机app快速开发平台-微网络撬动大市场 手机app快速开发平台 尤其适合crm系统,呼叫中心等业务功能... 作者Attilax 艾龙, EMAIL:14 ...
- HTML5手机APP开发入(5)
HTML5手机APP开发入(5) 回顾一下 HTML5手机APP开发入(4) 如何自定义Component,directive HTML5手机APP开发入(3) 如何实现MVC的代码重构,自定义一个P ...
- HTML5手机APP开发入(4)
HTML5手机APP开发入(4) 课程内容 完成一个自定义的Component用来展现通讯录用户的明细信息如下图 http://bootsnipp.com/snippets/featured/prof ...
- HTML5手机APP开发入(3)
HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...
- HTML5手机APP开发入门(2)
HTML5手机APP开发入门(2) 课程内容 使用IonicFramework v2 + angular 2 完成一个简单的联系人列表的操作,有三个页面: ListPage,DetailPage,Ad ...
- HTML5手机APP开发入门(1)
HTML5手机APP开发入门(1) 开发框架 Ionicframework V2 + Angular 2 具体内容可以参考一下网站 http://ionicframework.net/ http:// ...
随机推荐
- 【高精度】Vijos P1010 清帝之惑之乾隆
题目链接: https://vijos.org/p/1010 题目大意: 多组数据,求R的n次幂(R为不超过9999.9的小数 n<=200)R保证占6位 不输出前导0和后缀0,整数就只输出整数 ...
- codevs3945 完美拓印
3945 完美拓印 codevs月赛 第一场 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 小Q获得了一个神奇的印章,这个印章宽n ...
- Agri-Net(prim算法,最小生成树问题)
看图便知道: 来来上代码: #include <cstdio>#include <cstdlib>#include <cstring>#includ ...
- Cyclic Nacklace - HDU 3746(next求循环节)
题目大意:给你一些串,问如果想让这个串里面的循环节至少循环两次,需要添加几个字符(只能在最前面或者最后面添加).比如ababc 需要添加5个就是添加ababc. 分析:其实字符串的长度len-next ...
- Redis sort命令
http://www.cnblogs.com/linjiqin/archive/2013/06/14/3135921.html 1.添加 投票选项到 redis的 List 和HashMap lis ...
- 嵌入式Linux的一点学习心得
Linux本身是一个发展中的操作系统.它有很多前期不完善的机制,被后代用新的机制代替.但是老的机制不可能一下子就消亡,因此由于“历史原因”,会产生很多新旧机制共存的情况.而且Linux的教科书数不胜数 ...
- Appium测试时如何关联到Genymotion模拟器
一.在Appium里点击左上角的Android Settings里填写模拟器的devicesName,并记得勾选和配置Application Path. (可以通过adb devices命令查询出当前 ...
- 分享一个linux和linux的文件传输【scp无密码传输】
很多时候,本地测试服务器想把文件传到线上服务器的时候,很多人都是通过登陆线上服务器ssh 传输,这样挺危险的,很多弊端....所以我找了下方法,发现scp挺好用的! 模拟环境: 192.168.147 ...
- View获取焦点
<EditText android:id="@+id/et_phoneNum" android:layout_width="match_parent" a ...
- Java 删除当前文件夹及其文件夹下的全部文件
删除文件夹2以下的全部文件及其文件夹 演示样例文件夹例如以下:D:/test/1/2 1.使用FileUtils类.静默删除 String url = "D:/test/1/2"; ...