<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> <title>移动端触摸滑动</title> <meta name="author" content="rainna" /> <meta name="keywords" content="rainna‘s js lib" /> <meta name="description" content="移动端触摸滑动" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"/> <link type="text/css" rel="stylesheet" href="common/css/reset.css" /> <link type="text/css" rel="stylesheet" href="common/css/common.css" /> <style> *{margin:0;padding:0;} li{list-style:none;}
.m-slider{ width:100%; overflow:hidden;} .m-slider .cnt{ position: relative; left:0; width:500%; overflow: hidden; } .m-slider .cnt > div{ width:20%; float: left; } .m-slider .cnt img{ display:block; width:100%; } .m-slider .cnt p{ margin:20px 0; } .m-slider .icons{ text-align:center; color:#000; } .m-slider .icons span{ margin:0 5px; } .m-slider .icons .curr{ color:red; } .f-anim{ -webkit-transition:left .2s linear; } #slider{ top: 0px; } </style></head>
<body>使用说明在底部<div class="m-slider"> <div class="cnt" id="slider" style="top: 0px;"> <p>上上上上上上上上上上上</p> <div> <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div> <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div> <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div> <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div> <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>
<div class="m-slider"> <div class="cnt" id="slider1" style="top: 0px;"> <p>下下下下下下下下下下下下下下</p> <div> <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div> <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div> <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div> <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div> <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons1"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>
<div class="m-slider"> <div class="cnt" id="slider2" style="top: 0px;"> <p>上下上下上下上下上下上下</p> <div> <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div> <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div> <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div> <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div> <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons2"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div><div class="m-slider"> <div class="cnt" id="slider3" style="top: 0px;"> <p>左左左左左左左左左左</p> <div> <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div> <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div> <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div> <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div> <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons3"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>
<div class="m-slider"> <div class="cnt" id="slider4" style="top: 0px;"> <p>左右左右左右左右</p> <div> <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div> <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div> <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div> <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div> <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons4"> <span class="curr">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>
<script> var Slider = { //判断设备是否支持touch事件 touch:(‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch, init:function(obj){//初始化 if(obj && obj.ele){ var self = this; var events = obj.events;//事件 events.ele = obj.ele; events.htmEle = document.getElementById(events.ele);//滑动标识 events.icon = obj.icon; if(events.icon){ events.htmIcon = document.getElementById(events.icon);//滑动icon盒子标识 if(events.htmIcon){ events.icons = events.htmIcon.getElementsByTagName("span");//滑动具体icon标识 } } events.index = 0;//当前滑动索引 events.isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 events.isUpDown = 0; //这个参数判断是向上滚动还是向下滚动 events.isLeftRight = 0; //这个参数判断是向左滚动还是向右滚动 if(!!self.touch) { //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性 if(events.htmEle){ events.htmEle.addEventListener(‘touchstart‘,events.start,false); events.htmEle.addEventListener(‘touchmove‘, events.move, false); events.htmEle.addEventListener(‘touchend‘,events.end , false); }else{ console.log("输入的元素标识无效"); return; } } }else{ console.log("未能初始化成功"); return; } }, slideUp:function(obj){//向上滑动 var that = this; if(typeof that.flag == "undefined") { Slider.slideUp.prototype.start = function (event) { var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.top){ that.top = that.htmEle.style.top; that.top = parseInt(that.top.substr(0,that.top.length-2)); }else{ that.top = 0; } }; Slider.slideUp.prototype.move = function (event) { //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if (event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动 if (that.isScrolling === 1 && that.isUpDown === 1) {//垂直滚动 向上 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight; that.htmEle.style.top = (that.top + that.endPos.y) + ‘px‘; } }; Slider.slideUp.prototype.end = function (event) { if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.y,duration); } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件 }, slideDown:function(obj){//向下滑动 var that = this; if(typeof this.flag == "undefined") { Slider.slideDown.prototype.start = function (event) { //this html元素 //that Slider.slideUp var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.top){ that.top = that.htmEle.style.top; that.top = parseInt(that.top.substr(0,that.top.length-2)); }else{ that.top = 0; } }; Slider.slideDown.prototype.move = function (event) { //当页面被缩放过，就不执行move操作 if ( event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动 if (that.isScrolling === 1 && that.isUpDown === 0) {//垂直滚动 向下 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight; that.htmEle.style.top = (that.top + that.endPos.y) + ‘px‘; } }; Slider.slideDown.prototype.end = function (event) { if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.y,duration); } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件
}, slideUpDown:function(obj){//上下 var that = this; if(typeof this.flag == "undefined") { Slider.slideUpDown.prototype.start = function (event) { //this html元素 //that Slider.slideUp var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.top){ that.top = that.htmEle.style.top; that.top = parseInt(that.top.substr(0,that.top.length-2)); }else{ that.top = 0; } }; Slider.slideUpDown.prototype.move = function (event) { //当页面被缩放过，就不执行move操作 if ( event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动 if (that.isScrolling === 1) {//垂直滚动 向下 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientHeight; that.htmEle.style.top = (that.top + that.endPos.y) + ‘px‘; } }; Slider.slideUpDown.prototype.end = function (event) { if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.y,duration); } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件 }, slideLeft:function(obj){//向左滑动 var that = this; if(typeof that.flag == "undefined") { Slider.slideLeft.prototype.start = function (event) { var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.left){ that.left = that.htmEle.style.left; that.left = parseInt(that.left.substr(0,that.left.length-2)); }else{ that.left = 0; } }; Slider.slideLeft.prototype.move = function (event) { //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时表示向上滑动，0为向下滑动 that.isLeftRight = that.endPos.x < 0 ? 1:0; //isScrolling为1时表示向左滑动，0为向右滑动 if (that.isScrolling === 0 && that.isLeftRight === 1 ) {//水平向左滚动 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = (that.left + that.endPos.x) + ‘px‘; } }; Slider.slideLeft.prototype.end = function (event) { var duration = +new Date - that.startPos.time; //滑动的持续时间 if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.x,duration); }else{ that.icons[that.index].className = ‘‘; if(Number(duration) > 10){ //判断是左移还是右移，当偏移量大于10时执行 if(that.endPos.x < -10){//向左滑动 if(that.index !== that.icons.length-1){ that.index += 1; } } } that.icons[that.index].className = ‘curr‘; var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = -that.index*moveLen + "px"; } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件 }, slideRight:function(obj){//向右滑动 var that = this; if(typeof that.flag == "undefined") { Slider.slideRight.prototype.start = function (event) { //this html元素 //that Slider.slideUp var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.left){ that.left = that.htmEle.style.left; that.left = parseInt(that.left.substr(0,that.left.length-2)); }else{ that.left = 0; } }; Slider.slideRight.prototype.move = function (event) { //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动 that.isLeftRight = that.endPos.x < 0 ? 1:0; //isScrolling为1时表示向左滑动，0为向右滑动 if (that.isScrolling === 0 && that.isLeftRight === 0) {//水平向右滚动 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = that.left + that.endPos.x + ‘px‘; } }; Slider.slideRight.prototype.end = function (event) { var duration = +new Date - that.startPos.time; //滑动的持续时间 if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.x,duration); }else{ that.icons[that.index].className = ‘‘; if(Number(duration) > 10){ //判断是左移还是右移，当偏移量大于10时执行 if(that.endPos.x > 10){//向右滑动 if(that.index !== 0) { that.index -= 1; } } } that.icons[that.index].className = ‘curr‘; var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = -that.index*moveLen + "px"; } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件 }, slideLeftRight:function(obj){//左右滑动 var that = this; that.endFn = this.endFn = obj.endFn; that.iconClass = obj.iconClass; if(typeof that.flag == "undefined") { Slider.slideLeftRight.prototype.start = function (event) { //this html元素 //that Slider.slideUp var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch that.startPos = {x: touch.pageX, y: touch.pageY, time: +new Date}; //取第一个touch的坐标值 if(that.htmEle.style.left){ that.left = that.htmEle.style.left; that.left = parseInt(that.left.substr(0,that.left.length-2)); }else{ that.left = 0; } }; Slider.slideLeftRight.prototype.move = function (event) { //当屏幕有多个touch或者页面被缩放过，就不执行move操作 if ( event.scale && event.scale !== 1) { return; } var touch = event.targetTouches[0]; that.endPos = {x: touch.pageX - that.startPos.x, y: touch.pageY - that.startPos.y}; that.isScrolling = Math.abs(that.endPos.x) < Math.abs(that.endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动 that.isUpDown = that.endPos.y < 0 ? 1:0; //isScrolling为1时，表示向上滑动，0为向下滑动 if (that.isScrolling === 0) {//水平滚动 event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏 var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = that.left + that.endPos.x + ‘px‘; } }; Slider.slideLeftRight.prototype.end = function (event) { var duration = +new Date - that.startPos.time; //滑动的持续时间 if(typeof obj.endFn === "function"){ obj.endFn(that.index,that.endPos.x,duration); }else{ that.icons[that.index].className = ‘‘; if(Number(duration) > 10){ //判断是左移还是右移，当偏移量大于10时执行 if(that.endPos.x > 10){//向左滑动 if(that.index !== 0) { that.index -= 1; } }else if(that.endPos.x < -10){//向右滑动 if(that.index !== that.icons.length-1){ that.index += 1; } } } that.icons[that.index].className = that.iconClass; var moveLen = document.querySelector("#"+ that.ele +" > div").clientWidth; that.htmEle.style.left = -that.index*moveLen + "px"; } }; that.flag = true; } obj.events = that; Slider.init(obj);//初始化并绑定事件
} }; var slideUp =new Slider.slideUp({ ele:"slider" }); var slideDown =new Slider.slideDown({ ele:"slider1" }); var slideUpDown =new Slider.slideUpDown({ ele:"slider2" }); var slideLeft =new Slider.slideLeft({ ele:"slider3", icon:"icons3", endFn:function(index,x,duration){
} }); var slideLeftRight =new Slider.slideLeftRight({ ele:"slider4", icon:"icons4", iconClass:"curr" });/*使用方法：核心样式： <style>
.m-slider{ width:100%; overflow:hidden; } .m-slider .cnt{ position: relative; left:0; width:500%; overflow: hidden; } </style>* html结构：* <div class="m-slider"> <div class="cnt" id="slider4"><!-- 滑动最外层盒子 必须是id标识 <p>左右左右左右左右</p> <div><!-- 滑动具体盒子 必须是div <img src="img/move1.jpg"> <p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p> </div> <div><!-- 滑动具体盒子 必须是div <img src="img/move2.jpg"> <p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p> </div> <div><!-- 滑动具体盒子 必须是div <img src="img/move3.jpg"> <p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p> </div> <div><!-- 滑动具体盒子 必须是div <img src="img/move4.jpg"> <p>海洋星球3重庆天气热得我想卧轨自杀</p> </div> <div><!-- 滑动具体盒子 必须是div <img src="img/move5.jpg"> <p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p> </div> </div> <div class="icons" id="icons4"><!--- 标识盒子 必须是id标识 该部分当需要时填写 <span class="curr">1</span><!--- 具体标识 必须是span <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div></div>*js使用方法：* 上：* var slideUp =new Slider.slideUp({ ele:"slider", //滑动盒子标识 必选 endFn:function(index,distance,duration){//注：滑动结束时的方法 所有滑动均有该方法，可选 //index 滑动的标识 //distance 滑动距离 //duration 滑动时间 } }); 下： var slideDown =new Slider.slideDown({ ele:"slider1" }); 上下： var slideUpDown =new Slider.slideUpDown({ ele:"slider2" }); 左： var slideLeft =new Slider.slideLeft({ ele:"slider3", icon:"icons3" }); 右： var slideLeft =new Slider.slideLeft({ ele:"slider3", icon:"icons3" }); 左右 var slideLeftRight =new Slider.slideLeftRight({//在没有传入endFn方法时是一个插件内的滑动效果 模拟滑动幻灯片 ele:"slider4", icon:"icons4", iconClass:"curr"//仅在左右滑动时 没有endFn方法时有效 });******** */
</script></body></html>
时间： 2024-10-10 17:11:26