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);
});

  本文来自zzm_justin的博客,原文地址:http://blog.csdn.net/zzm_justin/article/details/8476373

HTML5手机开发——滚动和惯性缓动相关推荐

  1. shader TileMap html的Canvas绘图 缓动/反弹动作 unity

    图解Charles抓包工具使用教程 就是抓取返回的Data- -------------------------------------------------------shader 1 shade ...

  2. 第41天:匀速、缓动运动和图片无缝滚动

    一.匀速运动和缓动运动 缓动运动 公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 < ...

  3. 40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应

    40套各种风格游戏行业网站html5模板wap手机游戏资讯网站模板游戏动漫设计公司html模板游戏公司网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 不仅仅 ...

  4. (二)01- DCloud平台 HTML5+ App开发——真机调试运行 夜神模拟器运行HBuilderX中的html文件 夜神模拟器运行App的基础功能示例-手机设备-分享功能-拍照功能

    DCloud 平台 HTML5 + App 开发 下载安装 HBuilderX 下载地址:https://www.dcloud.io/hbuilderx.html HBuilderX-使用步骤: 第一 ...

  5. html手机游戏开发,Html5 手机游戏实例 拳皇

    [实例简介] Html5 + javascrip开发的实例游戏:拳皇游戏 算法独特,下载即可运行. [实例截图] [核心代码] StreetFighter-master └── StreetFight ...

  6. 手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效

    特效描述:html5 手机触屏 滑动图片 下一张查看特效.html5图片下一张查看 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...

  7. html5 app开发重大消息-腾讯在技术端推进Html5生态发展

    日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公 ...

  8. jQuery特效 | 导航底部横线跟随鼠标缓动

    jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...

  9. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...

最新文章

  1. 【动画1】UIView动画
  2. Microbiome:人类肠道和病原菌的可移动抗性组驱动环境中抗生素抗性增长
  3. java锁的有哪些_「并发编程」Java锁分类和特点有哪些
  4. 服务治理·理论篇(一)
  5. C语言试题五十七之假定输入的字符串中只包含字母和*号。请编写函数function,它的功能是:删除字符串中所有*号。在编写函数时,不得使用c语言提供的字符串函数。
  6. 待人真诚p2psearcher2013源码下载
  7. 2021年上半年系统集成项目管理工程师案例分析真题及答案解析
  8. MRAppMaster详细分析
  9. ECMAScript 6学习总结(1)——ECMAScript 6入门简介
  10. uva 11021 Tribles
  11. Prometheus 监控linux服务器
  12. python用于数据分析的包主要有哪些_大数据中用于硬核数据分析最适合的语言和工具包...
  13. android 反编译 dex2jar,Android反编译教程:apktool,dex2jar的使用
  14. CCNA系列十一之Frame-Relay
  15. js 字符串 常用方法
  16. Mathtype(2),用于创建此对象的程序是 Equation。您的计算机尚未安装此程序或此程序无响应。
  17. mediasoup推拉流分析
  18. video.js 自定义播放组件
  19. web前端知识总结二(css(其他)+移动web网页开发)
  20. 旋转编码开关 EC11 的工作原理

热门文章

  1. 二进制安装的mysql怎么卸载_mysql安装-----二进制包安装及卸载
  2. Web 浏览器相关的一些概念
  3. 怎么通过controller层退出登录_控制层访问拦截
  4. matlab保存f黑白图片_Matlab微积分
  5. html 开发资料 英文,HTML 中的框架(国外英文资料).doc
  6. ubuntu php 错误,Ubuntu下如何开启PHP错误提示教程
  7. python中requests库入门及写入文件
  8. spark驱动器和执行器小结
  9. VB 迅雷下载地址解密函数
  10. 求两直线交点程序 C