網頁設計% JS 移动端原生JS实现手指跟随触控滑动
来源：互联网 发布：java中字符串拼接函数 编辑：程序博客网 时间：2024/04/29 14:53
手指跟隨事件, 就像是側滑變換幻燈片
这里写的PageSlide的使用的方法是将HTML结构写好后往里传参就可以了.它接受所有滑动页面对象(在这里是document.querySelector(‘#pages’) ) 和要设定的方向(用X,Y表示横向或者纵向)以及一个可选的扩展函数.
要实现手指跟随的滑动效果， 关键在于通过touch事件来设置transform：translate3d（x，y，z）的参数，并在滑动结束（touchend）设置一个最小滑动距离minRange，该距离范围内的滑动，translate3d的参数等于touchmove的滑动距离，当大于minRange时， 则触发下一页（或上一页）的整体滑动，translate3d的X或Y的参数也就是视窗的宽（横向滑动时）或者高（纵向滑动时）
另外，对于一个网页app，还需要解决一个问题，即每个页面中可能有动画或者其他的事件需要在该页面出现时才开始播放，动画采用css类控制, 这里采用在每个当前页面中添加一个.play的类作为标记， 在每个页面的CSS动画设置中，同样加上.play类名，这样就实现了当页面出现才开始播放本页动画的功能。
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><title>PageSlider Demo</title><style>html,body{ width:100%; height:100%; margin:0 ; padding:0 ; overflow:hidden;}.pages{ width: 100%; height: 100%; position: relative;}.page { font-size:100px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; transform: translate3d(0px, 100%, 0px); -webkit-transform: translate3d(0px, 100%, 0px); -moz-transform: translate3d(0px, 100%, 0px); transition: transform .5s ease-out; -webkit-transition: -webkit-transform .5s ease-out; -moz-transition: -moz-transform .5s ease-out;}.page1{background:red;}.page2{background:green;}.page3{background:blue;}/* the box animation */.box{ width:100px ; height:100px; background:black ; }.play .myAnimation{ animation:move 1s ease 1 both ; -webkit-animation: move 1s ease 1 both ;}@-webkit-keyframes move{ 100%{ -webkit-transform:translate3d(150px,0,0); transform:translate3d(150px,0,0); -ms-transform: translate3d(150px,0,0);}}</style></head><body><div class="pages"> <div class = "page page1">page1</div> <div class = "page page2">page2<div class="box myAnimation"></div></div> <div class = "page page3">page3</div></div></div></body><script>// PageSlide接收三个参数:页面元素,要设定的滑动方向,可选的扩展函数var PageSlide = function(el, swipe, options) { this.options = options || {} //可选函数 this.current = 0 //当前页面索引 this.pageX //横向的手指落点 this.pageY //纵向的手指落点 this.height //设备高度 this.width //设备宽度 this.flag //判断滑动方向的变量 this.move //滑动的距离 this.$el = el //当前页面的对象 this.swipe = swipe || 'X' //滑动方向参数 this.resize().init().bindEvents() //初始化}PageSlide.prototype.init = function(i) { var current = i ? this.$el.children[i] : this.$el.firstElementChild if (!current) throw 'ERROR';//moving类名作为当前滑动页面的标记,也在样式中作滑动的扩展效果 current.classList.add('moving') current.style.webkitTransform = 'translate3d(0,0,0)'//以swipe的值预设置其他页面的宽高，获得流畅的交互效果for(var i = 1; i <this.$el.children.length ; i++){ this['set' + this.swipe](this.$el.children[i], (this.swipe === 'X' ? this.width : this.height)) } setTimeout(function() { current.classList.remove('moving') current.classList.add('play') }, 3e2) return this}//为页面绑定各种事件的绑定函数PageSlide.prototype.bindEvents = function() { var self = this window.addEventListener('resize orientationchange', this.resize.bind(this), false) 'touchstart touchmove touchend touchcancel'.split(' ').forEach(function(evn) { //将四个触控函数（申明在后面）绑定到每个页面 self.$el.addEventListener(evn, self[evn].bind(self), false) })}//获得当前触控的页面对象PageSlide.prototype.getCurrent = function() { return this.$el.children[this.current]}//初始化时获得设备的宽高PageSlide.prototype.resize = function() { this.width = this.$el.parentNode.clientWidth this.height = this.$el.parentNode.clientHeight return this}//到达任意页面的random()方法PageSlide.prototype.random = function() { var count = this.$el.children.length var current = this.current var arr = [] var num for (var i = 0; i < count; i++) { if (i !== current) arr.push(i.toString()) } num = Math.floor(Math.random() * arr.length) this.direct(+arr[num])}// 四个内建的滑动事件函数,与前面绑定函数相呼应PageSlide.prototype.touchstart = function(e) { var touches = e.touches[0] //触控开始 this.flag = null this.move = 0 //记录落点 this.pageX = touches.pageX this.pageY = touches.pageY}PageSlide.prototype.touchmove = function(e) { var touches = e.touches[0] var X = touches.pageX - this.pageX var Y = touches.pageY - this.pageY var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling //添加移动样式 if (!this.flag) { this.flag = Math.abs(X) > Math.abs(Y) ? 'X' : 'Y' if (this.flag === this.swipe) { current.classList.add('moving') next && next.classList.add('moving') prev && prev.classList.add('moving') } } if (this.flag === this.swipe) { e.preventDefault() e.stopPropagation() switch (this.swipe) { case 'X': //swipe horizontal this.move = X this.setX(current, X) next && (this.setX(next, X + this.width)) prev && (this.setX(prev, X - this.width)) break; case 'Y': //swipe vertical this.move = Y this.setY(current, Y) next && (this.setY(next, Y + this.height)) prev && (this.setY(prev, Y - this.height)) break; } }}PageSlide.prototype.touchend = function(e) { var minRange = 50 var move = this.move var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling current.classList.remove('moving') next && next.classList.remove('moving') prev && prev.classList.remove('moving') if (!this.flag) return e.preventDefault() //滑动结束前往下一页面,next()方法调用了go()方法 if (move < -minRange && next) return this.next() if (move > minRange && prev) return this.prev() this.reset()}PageSlide.prototype.touchcancel = function(e) { var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling current.classList.remove('moving') next && next.classList.remove('moving') prev && prev.classList.remove('moving') this.reset()}//动态设定translate3d参数方法PageSlide.prototype.setX = function(el, x, unit) { el && (el.style.webkitTransform = 'translate3d(' + x + (unit || 'px') + ',0,0)')}PageSlide.prototype.setY = function(el, y, unit) { el && (el.style.webkitTransform = 'translate3d(0,' + y + (unit || 'px') + ',0)')}//设置当前触控页面translate3d参数为0的方法PageSlide.prototype.setCurrent = function(el, i) { el && (el.style.webkitTransform = 'translate3d(0,0,0)') if (i) { this.current = i this.$current = this.$el.children[i] }}//调用go()方法前往下一或上一页面PageSlide.prototype.next = function() { this.go(this.current + 1)}PageSlide.prototype.prev = function() { this.go(this.current - 1)}//重置方法,用于初始化以及当前页面的重置PageSlide.prototype.reset = function() { var width = this.width var height = this.height var swipe = this.swipe var current = this.getCurrent() var prev = current.previousElementSibling var next = current.nextElementSibling this.setCurrent(current) prev && (this['set' + swipe](prev, -(swipe === 'X' ? width : height))) next && (this['set' + swipe](next, swipe === 'X' ? width : height))}//去往下一或上一页面的go方法PageSlide.prototype.go = function(i) { var onFinish = this.options.onFinish var current = this.getCurrent() var total = this.$el.childElementCount var target = this.$el.children[i] var d = i < this.current ? -1 : 1 if (i === this.current || i < 0 || i >= total) return if (onFinish && (typeof onFinish === 'function')) onFinish.call(this, i) // 滑动完成调用方法 typeof this.options.tranSetionEnd ==='function' && this.options.tranSetionEnd.call(this) this.current = i this['set' + this.swipe](current, -d * (this.swipe === 'X' ? this.width : this.height)) this.setCurrent(target, i) this.finish(current, target)}//滑动完成后删除当前页面.play标记以及为下一页面添加.play标记PageSlide.prototype.finish = function(curr, target) { this.flag = null setTimeout(function() { curr && curr.classList.remove('play') target && target.classList.add('play') }, 3e2)}//直达任意页面的方法//直达某一页面的方法, 因为有个项目的需要//写了这个方法,要从任意页面开始滑动依然能保持正常的滑动体验//就需要将直达页面的前面所有页面的translate3d参数都设置为(0,-height,0) PageSlide.prototype.direct = function(i){ if(i&&typeof(i)==='number') { this.go(i) for(var j = 0; j< i ;j++) { this['set' + this.swipe](this.$el.children[j], -1 * (this.swipe === 'X' ? this.width : this.height)) } } else return } // 传参 document.addEventListener('touchmove', function(e) { e.preventDefault()})var pages = new PageSlide(document.querySelector('.pages'), 'Y', { tranSetionEnd: function() { console.log(this.current); }})</script></html>PageSlide的代码解析如下：
// PageSlide接收三个参数:页面元素,要设定的滑动方向,可选的扩展函数var PageSlide = function(el, swipe, options) { this.options = options || {} //可选函数 this.current = 0 //当前页面索引 this.pageX //横向的手指落点 this.pageY //纵向的手指落点 this.height //设备高度 this.width //设备宽度 this.flag //判断滑动方向的变量 this.move //滑动的距离 this.$el = el //当前页面的对象 this.swipe = swipe || 'X' //滑动方向参数 this.resize().init().bindEvents() //初始化}PageSlide.prototype.init = function(i) { var current = i ? this.$el.children[i] : this.$el.firstElementChild if (!current) throw 'ERROR';//moving类名作为当前滑动页面的标记,也在样式中作滑动的扩展效果 current.classList.add('moving') current.style.webkitTransform = 'translate3d(0,0,0)'//以swipe的值预设置其他页面的宽高，获得流畅的交互效果for(var i = 1; i <this.$el.children.length ; i++){ this['set' + this.swipe](this.$el.children[i], (this.swipe === 'X' ? this.width : this.height)) } setTimeout(function() { current.classList.remove('moving') current.classList.add('play') }, 3e2) return this}//为页面绑定各种事件的绑定函数PageSlide.prototype.bindEvents = function() { var self = this window.addEventListener('resize orientationchange', this.resize.bind(this), false) 'touchstart touchmove touchend touchcancel'.split(' ').forEach(function(evn) { //将四个触控函数（申明在后面）绑定到每个页面 self.$el.addEventListener(evn, self[evn].bind(self), false) })}//获得当前触控的页面对象PageSlide.prototype.getCurrent = function() { return this.$el.children[this.current]}//初始化时获得设备的宽高PageSlide.prototype.resize = function() { this.width = this.$el.parentNode.clientWidth this.height = this.$el.parentNode.clientHeight return this}//到达任意页面的random()方法PageSlide.prototype.random = function() { var count = this.$el.children.length var current = this.current var arr = [] var num for (var i = 0; i < count; i++) { if (i !== current) arr.push(i.toString()) } num = Math.floor(Math.random() * arr.length) this.direct(+arr[num])}// 四个内建的滑动事件函数,与前面绑定函数相呼应PageSlide.prototype.touchstart = function(e) { var touches = e.touches[0] //touch start initializing this.flag = null this.move = 0 //record coordinates this.pageX = touches.pageX this.pageY = touches.pageY}PageSlide.prototype.touchmove = function(e) { var touches = e.touches[0] var X = touches.pageX - this.pageX var Y = touches.pageY - this.pageY var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling //add moving styled if (!this.flag) { this.flag = Math.abs(X) > Math.abs(Y) ? 'X' : 'Y' if (this.flag === this.swipe) { current.classList.add('moving') next && next.classList.add('moving') prev && prev.classList.add('moving') } } if (this.flag === this.swipe) { e.preventDefault() e.stopPropagation() switch (this.swipe) { case 'X': //swipe horizontal this.move = X this.setX(current, X) next && (this.setX(next, X + this.width)) prev && (this.setX(prev, X - this.width)) break; case 'Y': //swipe vertical this.move = Y this.setY(current, Y) next && (this.setY(next, Y + this.height)) prev && (this.setY(prev, Y - this.height)) break; } }}PageSlide.prototype.touchend = function(e) { var minRange = 50 var move = this.move var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling current.classList.remove('moving') next && next.classList.remove('moving') prev && prev.classList.remove('moving') if (!this.flag) return e.preventDefault() //滑动结束前往下一页面,next()方法调用了go()方法 if (move < -minRange && next) return this.next() if (move > minRange && prev) return this.prev() this.reset()}PageSlide.prototype.touchcancel = function(e) { var current = this.getCurrent() var next = current.nextElementSibling var prev = current.previousElementSibling current.classList.remove('moving') next && next.classList.remove('moving') prev && prev.classList.remove('moving') this.reset()}//动态设定translate3d参数方法PageSlide.prototype.setX = function(el, x, unit) { el && (el.style.webkitTransform = 'translate3d(' + x + (unit || 'px') + ',0,0)')}PageSlide.prototype.setY = function(el, y, unit) { el && (el.style.webkitTransform = 'translate3d(0,' + y + (unit || 'px') + ',0)')}//设置当前触控页面translate3d参数为0的方法PageSlide.prototype.setCurrent = function(el, i) { el && (el.style.webkitTransform = 'translate3d(0,0,0)') if (i) { this.current = i this.$current = this.$el.children[i] }}//调用go()方法前往下一或上一页面PageSlide.prototype.next = function() { this.go(this.current + 1)}PageSlide.prototype.prev = function() { this.go(this.current - 1)}//重置方法,用于初始化以及当前页面的重置PageSlide.prototype.reset = function() { var width = this.width var height = this.height var swipe = this.swipe var current = this.getCurrent() var prev = current.previousElementSibling var next = current.nextElementSibling this.setCurrent(current) prev && (this['set' + swipe](prev, -(swipe === 'X' ? width : height))) next && (this['set' + swipe](next, swipe === 'X' ? width : height))}//去往下一或上一页面的go方法PageSlide.prototype.go = function(i) { var onFinish = this.options.onFinish var current = this.getCurrent() var total = this.$el.childElementCount var target = this.$el.children[i] var d = i < this.current ? -1 : 1 if (i === this.current || i < 0 || i >= total) return if (onFinish && (typeof onFinish === 'function')) onFinish.call(this, i) // 滑动完成调用方法 typeof this.options.tranSetionEnd ==='function' && this.options.tranSetionEnd.call(this) this.current = i this['set' + this.swipe](current, -d * (this.swipe === 'X' ? this.width : this.height)) this.setCurrent(target, i) this.finish(current, target)}//滑动完成后删除当前页面.play标记以及为下一页面添加.play标记PageSlide.prototype.finish = function(curr, target) { this.flag = null setTimeout(function() { curr && curr.classList.remove('play') target && target.classList.add('play') }, 3e2)}/*direct to a page */ //直达某一页面的方法, 因为有个项目的需要,写了这个方法,要从任意页面开始滑动依然能保持正常的滑动体验,就需要将直达页面的前面所有页面的translate3d参数都设置为(0,-height,0) PageSlide.prototype.direct = function(i){ if(i&&typeof(i)==='number') { this.go(i) for(var j = 0; j< i ;j++) { this['set' + this.swipe](this.$el.children[j], -1 * (this.swipe === 'X' ? this.width : this.height)) } } else return }轉載自SEGMENTFAULT社群, 僅記錄與學習用途唷, 如有冒犯敬請告知
https://segmentfault.com/a/1190000003817077
附上作者大神的github
感謝感謝
0 0
- 網頁設計% JS 移动端原生JS实现手指跟随触控滑动
- 1、js原生实现移动端手指滑动轮播图效果
- 1、js原生实现移动端手指滑动轮播图效果(2)
- 3、js原生实现移动端手指滑动轮播图效果(3)
- 基于zepto.js的移动端H5单页面跟随手指滑动切换控件pageSlider
- 移动端js判断手指滑动方向
- 原生移动端滑动js
- View滑动-跟随手指移动
- 移动端js手指滑动事件初体验
- js判断手指滑动方向（移动端）
- 原生js实现网页触屏滑动
- js实现鼠标滑动背景跟随
- Slip——整屏滑动，移动端跟随手指滑动
- 基于js的无缝轮播图（ 移动端手指滑动操作）（扩展：简单的倒计时）
- 实现跟随手指移动的小球
- 实现跟随手指移动的小球
- JS实现图片跟随鼠标移动
- JS实现控件跟随鼠标移动
- eclipse 导出maven 项目关联jar 文件
- 二叉树的C++简单实现
- Fisher vector学习笔记
- 第十四周课后作业——项目三
- 蓝桥杯嵌入式RTC调试
- 網頁設計% JS 移动端原生JS实现手指跟随触控滑动
- 4721: [Noip2016]蚯蚓
- OpenStack CPU pinning
- dcos marathon - 容器的存储
- LA 3983 Robotruck（DP）
- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈请大家随意评论
- LintCode : 删除二叉查找树的节点
- 【niubi-job——一个分布式的任务调度框架】----框架设计原理以及实现
- Database PL/SQL Packages and Types Reference 168 UTL_FILE
