下面代码只是实现了上下滑动惯性,没有写水平滑动惯性。(临时代码笔记,可能会在以后的过程中不断更新优化代码)

/*** 惯性原理:* 产生的速度 = 移动距离 / 移动时间* 距离 = 松开的坐标 - 上次的坐标  (距离差)* 时间 = 松开的时间 - 按下的时间  (时间差)* */var dargFun = {dargDom:null, //惯性滑动的DOM区域startX:0, //开始偏移的XstartY:0, //开始偏移的YclientX:0, clientY:0,translateX:0, //保存的X偏移translateY:0, //保存的Y偏移maxWidth:0, //滑动的最大宽度maxHeight:0, //滑动的最大高度startTime:0, //记录初始按下时间init:function(config){this.dargDom = document.querySelector(config.dargDom);this.maxWidth = this.dargDom.offsetWidth;this.maxHeight = this.dargDom.offsetHeight;this.dargDom.addEventListener('touchstart',(event)=>{event.stopPropagation(); //停止事件传播this.clientX = event.changedTouches[0].clientX;this.clientY = event.changedTouches[0].clientY;this.dargDom.style.WebkitTransition = this.dargDom.style.transition = '';this.startX = this.translateX;this.startY = this.translateY;this.startTime = Date.now();},false);this.dargDom.addEventListener('touchmove',(event)=>{if(document.documentElement.scrollTop >= this.dargDom.scrollHeight - this.dargDom.clientHeight){}else{return;}event.stopPropagation(); //停止事件传播this.translateX = event.changedTouches[0].clientX - this.clientX + this.startX;this.translateY = event.changedTouches[0].clientY - this.clientY + this.startY;if(this.translateY > 0 ){ //拖动系数. 拉力的感觉this.translateY *= 0.4;}else if( this.translateY < -(this.dargDom.scrollHeight - this.dargDom.clientHeight)){ this.translateY = (event.changedTouches[0].clientY - this.clientY) * 0.4 + this.startY;}this.animate(this.translateY);},false);this.dargDom.addEventListener('touchend',(event)=>{event.stopPropagation(); //停止事件传播var distanceY = event.changedTouches[0].clientY - this.clientY,timeDis = Date.now() - this.startTime,  //时间差speed = (distanceY / timeDis) * 100;// 惯性this.translateY += speed;this.translateY  = 0;// 添加贝塞尔曲线this.dargDom.style.WebkitTransition = this.dargDom.style.transition = 'transform 500ms cubic-bezier(0.1, 0.57, 0.1, 1)';this.animate(this.translateY);},false);},animate:function(y){this.dargDom.style.WebkitTransform = this.dargDom.style.transform = 'translateY('+y+'px)';}
}export default dargFun;

注:当滑动到页面底部的时候才触发touchmove事件。

调用方式:

dragFun.init({dargDom:'#contractContanier'
});

参考地址:

  • 移动端拖动惯性
  • 原生移动端滑动js

转载于:https://www.cnblogs.com/moqiutao/p/8529508.html

HTML5移动端拖动惯性相关推荐

  1. 移动端 html5领奖页面,HTML5移动端交互

    在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式.用手指在屏幕上"刮奖"就是其中的一个非常典型的例子,它不仅需要前端设计师能 ...

  2. html5圆圈图标,html5移动端环形图标菜单代码

    特效描述:html5移动端 环形图标菜单.html5移动端环形图标菜单代码 代码结构 1. 引入JS 2. HTML代码  html5移动端环形图标菜单代码 window.οnlοad=functi ...

  3. html5外置样式表,HTML5移动端通用css详解

    HTML5移动端通用css 下面是common.css内容 /*css初始化*/ /*清除内外边距*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd, ...

  4. html5 自适应手机布局,科技常识:html5移动端自适应布局的实现

    今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现 的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...

  5. HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解

    html5中可拖动dragable属性及其他成员的讲解 发布时间:2020-04-22 11:08:02 来源:亿速云 阅读:350 作者:小新 这篇文章主要为大家详细介绍了html5中可拖动drag ...

  6. 学员使用移动端进行自学的视频动画html,Html5移动端获奖无缝滚动动画实现

    这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现示例,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了Html5移动端获奖无缝滚动动画实现示例,分享给大家,具体如下: 需求分析 哈哈 ...

  7. html5 移动端单页面布局

    序      移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...

  8. html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构

    HTML5移动端最基本网页模板代码(以下HTML代码可直接拷贝复制使用): 手机网站最基本HTML模板 body{font-size:62.5%;font-family:"Microsoft ...

  9. 手机端 html5 按长按保存图片尺寸,html5移动端禁止长按图片保存的实现

    在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片.那该如何实现呢?下面给出3种解决方案. 方案一:使用 pointer-events: ...

最新文章

  1. BAT无线工程师面试流程详细解析
  2. anaconda下载的python在哪_Anaconda下Python环境下载及安装
  3. java中主线程首先执行_java经典面试题:子线程先运行30次主线程,主线程40次,如此循环50次?...
  4. 鸿蒙os全面升级,华为突然宣布,鸿蒙OS正式版6月底全面升级,幸福来得太突然...
  5. 【转载】linux进程控制-exec系列 exec系统调用
  6. Docker(六)安装Red5进行rtmp推流
  7. ubuntu 启动时显示initramfs 无法进入系统
  8. hdu 4057(ac自动机+状态压缩dp)
  9. 双系统在linux中修复引导文件,windows ubuntu双系统重装后修复grub引导
  10. MSSQL获取当前日期及格式
  11. win32实现两个透明窗口联动
  12. Android 6.0 sensor 框架详解 (application层)
  13. 06. Java面向对象——更改器方法和访问器方法
  14. 如何用尺规作图画圆的切线_尺规作图过圆外一点作圆的切线的四种方法
  15. 【labelme格式json转为labelimg格式的xml(VOC)】
  16. 在线生成ascii字符画网站字符图案在线生成工具
  17. 小程序为什么有的方法要写在methods,有的可直接写在page下
  18. 太牛了!华为天才少年稚晖君又自制硬萌机器人,代码开源了
  19. python爬虫自动提交HDU并获取AC状态(p3+request+Beatifulsoup)
  20. B2B支付平台市场现状研究分析-

热门文章

  1. Django 3.2.5博客开发教程:使用富文本编辑器添加数据
  2. centos 6.7 ssh免密登录配置
  3. 【视频】vue表单提交
  4. 【软考-软件设计师】计算机存储器的分类
  5. python 多分类情感_文本情感分类(一):传统模型
  6. 小米手机系统服务组件是干什么的_怎么查看小米手机MIUI系统的基本功能-小米手机MIUI系统基础功能查询方法讲解...
  7. 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(三)
  8. js加版本号 webpack_webpack脚手架增加版本号
  9. 一篇文章全方位了解:static main final
  10. 八大基本数据类型对应的八大包装类(含对应面试题解析)