Http://www.jb51.net/article/64303.htm
JS Implementation Touch Mobile touch screen Slide Event
Submission: Hebedich font: [Increase decrease] Type: Reprint time: 2015-04-17 I want to comment
Before you begin to describe the touch event, you need to describe the touch objects that are unique to the multi-touch system (Android and iOS, and even Nokia's newest Meego systems emulate similar objects). This object encapsulates a screen touch, usually from a finger. It is generated when the touch event is triggered and can be taken from the event object of the touch events handler
The effect of mobile touch screen sliding is actually the picture carousel, which is well implemented on the PC's page, binding the click and MouseOver events to complete. But on mobile devices, to achieve this kind of carousel effect, you need to use the core touch event. Handle touch events to track each finger to the screen slide.
Here are four kinds of touch events
Touchstart: Triggers when the finger is placed on the screen
Touchmove://finger on-screen swipe trigger
Touchend://trigger when finger leaves screen
Touchcancel://The system cancels the touch event when triggered, this seems to be less use
Once each touch event is triggered, an event object is generated and the event object includes the following three touch lists in addition
Touches://List of all fingers on the current screen
Targettouches://The list of fingers on the current DOM element, try to use this instead of touches
Changedtouches://List of fingers that involve the current event, try to use this instead of touches
Each touch in these lists consists of the touch object, which contains the touching information, with the following main attributes:
Clientx/clienty://Touch point relative to the location of the browser window
Pagex/pagey://Touch point relative to the position of the page
Screenx/screeny://Touch point relative to the position of the screen
Identifier: ID of the//touch object
Target://Current DOM element
Attention:
When you swipe the entire screen, your finger affects the browser's behavior, such as scrolling and zooming. So when you invoke the touch event, be careful to suppress zooming and scrolling.
1. Disable zooming
Set with meta meta tags.
2. Disable scrolling
Preventdefault is blocking the default behavior, and the default behavior of the touch event is scrolling.
Event.preventdefault ();
Use case:
?
| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611 7118119120121122123124125126127128 |
<!DOCTYPE html><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="target-densitydpi=320,width=640,user-scalable=no"><style>*{margin:0;padding:0;}li{list-style:none;}.m-slider{width:600px;margin:50px 20px;overflow:hidden;}.m-slider .cnt{position:relative;left:0;width:3000px;}.m-slider .cnt li{float:left;width:600px;}.m-slider .cnt img{display:block;width:100%;height:450px;}.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;}</style><body><div class="m-slider"><ul class="cnt"id="slider"><li>"http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg"><p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p></li><li>"http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"><p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p></li><li>"http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg"><p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p></li><li>"http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg"><p>海洋星球3重庆天气热得我想卧轨自杀</p></li><li>"http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg"><p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p></li></ul><div class="icons"id="icons"><span class="curr">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div></div><script>varslider = {//判断设备是否支持touch事件touch:(‘ontouchstart‘ in window) || window.DocumentTouch && document instanceof DocumentTouch,slider:document.getElementById(‘slider‘),//事件events:{index:0, //显示元素的索引slider:this.slider, //this为slider对象icons:document.getElementById(‘icons‘),icon:this.icons.getElementsByTagName(‘span‘),handleEvent:function(event){var self = this; //this指events对象if(event.type == ‘touchstart‘){self.start(event);}else if(event.type == ‘touchmove‘){self.move(event);}else if(event.type == ‘touchend‘){self.end(event);}},//滑动开始start:function(event){var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touchstartPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动this.slider.addEventListener(‘touchmove‘,this,false);this.slider.addEventListener(‘touchend‘,this,false);},//移动move:function(event){//当屏幕有多个touch或者页面被缩放过，就不执行move操作if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;var touch = event.targetTouches[0];endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时，表示纵向滑动，0为横向滑动if(isScrolling === 0){event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏this.slider.className = ‘cnt‘;this.slider.style.left = -this.index*600 + endPos.x + ‘px‘;}},//滑动释放end:function(event){var duration = +new Date - startPos.time; //滑动的持续时间if(isScrolling === 0){ //当为水平滚动时this.icon[this.index].className = ‘‘;if(Number(duration) > 10){//判断是左移还是右移，当偏移量大于10时执行if(endPos.x > 10){if(this.index !== 0) this.index -= 1;}else if(endPos.x < -10){if(this.index !== this.icon.length-1) this.index += 1;}}this.icon[this.index].className = ‘curr‘;this.slider.className = ‘cnt f-anim‘;this.slider.style.left = -this.index*600 + ‘px‘;}//解绑事件this.slider.removeEventListener(‘touchmove‘,this,false);this.slider.removeEventListener(‘touchend‘,this,false);}},//初始化init:function(){var self = this; //this指slider对象if(!!self.touch) self.slider.addEventListener(‘touchstart‘,self.events,false); //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性}};slider.init();</script></body> |
The above mentioned is the whole content of this article, I hope you can like.
JS Implementation Touch Mobile touch screen Slide Event
