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手机开发——滚动和惯性缓动相关推荐
- shader TileMap html的Canvas绘图 缓动/反弹动作 unity
图解Charles抓包工具使用教程 就是抓取返回的Data- -------------------------------------------------------shader 1 shade ...
- 第41天:匀速、缓动运动和图片无缝滚动
一.匀速运动和缓动运动 缓动运动 公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 < ...
- 40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应
40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅 ...
- (二)01- DCloud平台 HTML5+ App开发——真机调试运行 夜神模拟器运行HBuilderX中的html文件 夜神模拟器运行App的基础功能示例-手机设备-分享功能-拍照功能
DCloud 平台 HTML5 + App 开发 下载安装 HBuilderX 下载地址:https://www.dcloud.io/hbuilderx.html HBuilderX-使用步骤: 第一 ...
- html手机游戏开发,Html5 手机游戏实例 拳皇
[实例简介] Html5 + javascrip开发的实例游戏:拳皇游戏 算法独特,下载即可运行. [实例截图] [核心代码] StreetFighter-master └── StreetFight ...
- 手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏 滑动图片 下一张查看特效.html5图片下一张查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...
- html5 app开发重大消息-腾讯在技术端推进Html5生态发展
日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公 ...
- jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...
最新文章
- 【动画1】UIView动画
- Microbiome:人类肠道和病原菌的可移动抗性组驱动环境中抗生素抗性增长
- java锁的有哪些_「并发编程」Java锁分类和特点有哪些
- 服务治理·理论篇(一)
- C语言试题五十七之假定输入的字符串中只包含字母和*号。请编写函数function,它的功能是:删除字符串中所有*号。在编写函数时,不得使用c语言提供的字符串函数。
- 待人真诚p2psearcher2013源码下载
- 2021年上半年系统集成项目管理工程师案例分析真题及答案解析
- MRAppMaster详细分析
- ECMAScript 6学习总结(1)——ECMAScript 6入门简介
- uva 11021 Tribles
- Prometheus 监控linux服务器
- python用于数据分析的包主要有哪些_大数据中用于硬核数据分析最适合的语言和工具包...
- android 反编译 dex2jar,Android反编译教程:apktool,dex2jar的使用
- CCNA系列十一之Frame-Relay
- js 字符串 常用方法
- Mathtype(2),用于创建此对象的程序是 Equation。您的计算机尚未安装此程序或此程序无响应。
- mediasoup推拉流分析
- video.js 自定义播放组件
- web前端知识总结二(css(其他)+移动web网页开发)
- 旋转编码开关 EC11 的工作原理