HTML5移动端拖动惯性
下面代码只是实现了上下滑动惯性,没有写水平滑动惯性。(临时代码笔记,可能会在以后的过程中不断更新优化代码)
/*** 惯性原理:* 产生的速度 = 移动距离 / 移动时间* 距离 = 松开的坐标 - 上次的坐标 (距离差)* 时间 = 松开的时间 - 按下的时间 (时间差)* */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移动端拖动惯性相关推荐
- 移动端 html5领奖页面,HTML5移动端交互
在移动设备中,几乎所有的操作都和触摸有关,而基于这一特性,近年来在移动端中也兴起了一些较为特别的交互方式.用手指在屏幕上"刮奖"就是其中的一个非常典型的例子,它不仅需要前端设计师能 ...
- html5圆圈图标,html5移动端环形图标菜单代码
特效描述:html5移动端 环形图标菜单.html5移动端环形图标菜单代码 代码结构 1. 引入JS 2. HTML代码 html5移动端环形图标菜单代码 window.οnlοad=functi ...
- html5外置样式表,HTML5移动端通用css详解
HTML5移动端通用css 下面是common.css内容 /*css初始化*/ /*清除内外边距*/ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd, ...
- html5 自适应手机布局,科技常识:html5移动端自适应布局的实现
今天小编跟大家讲解下有关html5移动端自适应布局的实现 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html5移动端自适应布局的实现 的相关资料,希望小伙伴们看了有所帮助. 场景:为适 ...
- HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解 发布时间:2020-04-22 11:08:02 来源:亿速云 阅读:350 作者:小新 这篇文章主要为大家详细介绍了html5中可拖动drag ...
- 学员使用移动端进行自学的视频动画html,Html5移动端获奖无缝滚动动画实现
这篇文章主要介绍了Html5移动端获奖无缝滚动动画实现示例,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了Html5移动端获奖无缝滚动动画实现示例,分享给大家,具体如下: 需求分析 哈哈 ...
- html5 移动端单页面布局
序 移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面 今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
- html5 手机站点,HTML5移动端手机网站基本模板 HTML5基本结构
HTML5移动端最基本网页模板代码(以下HTML代码可直接拷贝复制使用): 手机网站最基本HTML模板 body{font-size:62.5%;font-family:"Microsoft ...
- 手机端 html5 按长按保存图片尺寸,html5移动端禁止长按图片保存的实现
在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片.那该如何实现呢?下面给出3种解决方案. 方案一:使用 pointer-events: ...
最新文章
- BAT无线工程师面试流程详细解析
- anaconda下载的python在哪_Anaconda下Python环境下载及安装
- java中主线程首先执行_java经典面试题:子线程先运行30次主线程,主线程40次,如此循环50次?...
- 鸿蒙os全面升级,华为突然宣布,鸿蒙OS正式版6月底全面升级,幸福来得太突然...
- 【转载】linux进程控制-exec系列 exec系统调用
- Docker(六)安装Red5进行rtmp推流
- ubuntu 启动时显示initramfs 无法进入系统
- hdu 4057(ac自动机+状态压缩dp)
- 双系统在linux中修复引导文件,windows ubuntu双系统重装后修复grub引导
- MSSQL获取当前日期及格式
- win32实现两个透明窗口联动
- Android 6.0 sensor 框架详解 (application层)
- 06. Java面向对象——更改器方法和访问器方法
- 如何用尺规作图画圆的切线_尺规作图过圆外一点作圆的切线的四种方法
- 【labelme格式json转为labelimg格式的xml(VOC)】
- 在线生成ascii字符画网站字符图案在线生成工具
- 小程序为什么有的方法要写在methods,有的可直接写在page下
- 太牛了!华为天才少年稚晖君又自制硬萌机器人,代码开源了
- python爬虫自动提交HDU并获取AC状态(p3+request+Beatifulsoup)
- B2B支付平台市场现状研究分析-
热门文章
- Django 3.2.5博客开发教程:使用富文本编辑器添加数据
- centos 6.7 ssh免密登录配置
- 【视频】vue表单提交
- 【软考-软件设计师】计算机存储器的分类
- python 多分类情感_文本情感分类(一):传统模型
- 小米手机系统服务组件是干什么的_怎么查看小米手机MIUI系统的基本功能-小米手机MIUI系统基础功能查询方法讲解...
- 基于 abp vNext 和 .NET Core 开发博客项目 - 定时任务最佳实战(三)
- js加版本号 webpack_webpack脚手架增加版本号
- 一篇文章全方位了解:static main final
- 八大基本数据类型对应的八大包装类(含对应面试题解析)