js implements touch mobile touch screen sliding events
- 2020-05-30 19:24:07
- OfStack
The effect of mobile touch screen sliding is actually image rotation, which can be easily realized on the PC page, and can be completed by binding click, mouseover and other events. On mobile devices, however, the core touch event is needed to achieve this roving effect. Handling the touch event can track every finger that slides on the screen.
Here are four types of touch events
touchstart: // triggered when finger is placed on screen
touchmove: // finger swipes across the screen to trigger
touchend: // triggered when finger leaves screen
touchcancel: // triggered when the system cancels the touch event, which seems to be less frequently used
After each touch event is triggered, one event object is generated, and the event object includes the following three touch lists
touches: // a list of all fingers currently on the screen
targetTouches: // the current list of fingers on the dom element, try to use this instead of touches
changedTouches: // a list of fingers involved in the current event, try to use this instead of touches
Each touch in these lists is made up of touch objects, and touch objects contain touch information. The main properties are as follows:
clientX/clientY: // the position of the touch point relative to the browser window
pageX/pageY: // the position of the touch point relative to the page
screenX/screenY: // the position of the touch point relative to the screen
identifier: // ID for touch objects
target: // current DOM element
Note:
When your finger swipes across the screen, it can affect the browser's behavior, such as scrolling and zooming. So be careful not to zoom and scroll when calling the touch event.
1. Do not zoom
Set it using the meta meta tag.
2. No scrolling
preventDefault is the default behavior to block the touch event, and the default behavior for the touch event is scrolling.
event.preventDefault();
Use cases:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> Mobile touch swipe </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content=" Mobile touch swipe " />
<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>
</head>
<body>
<div class="m-slider">
<ul class="cnt" id="slider">
<li>
<img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg">
<p>20140813 The mirror world, after all, is just a reflection. Can see your shadow, but can not touch your future </p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>20140812 Xilinhot to east Ukraine flag S101 Where you have to go, 1 It's a beautiful railway. Under the railway was a small salt marsh, faint 1 The feeling of silk sky. Too bad I played here 1 Not for hours 1 The train passed by and had to continue to dongwu banner. </p>
</li>
<li>
<img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg">
<p>20140811 Why is the color of the water so blue, I also wonder, anyway, the natural saturation and contrast pull out is this color </p>
</li>
<li>
<img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg">
<p> Ocean planet 3 It's so hot in chongqing that I want to throw myself on the train </p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p> The above works are from two designers as viewers, can you distinguish the design style </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>
var slider = {
// Determine if the device supports touch The event
touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider:document.getElementById('slider'),
// The event
events:{
index:0, // Displays the index of the element
slider:this.slider, //this for slider object
icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
handleEvent:function(event){
var self = this; //this Refers to the events object
if(event.type == 'touchstart'){
self.start(event);
}else if(event.type == 'touchmove'){
self.move(event);
}else if(event.type == 'touchend'){
self.end(event);
}
},
// The slide began
start:function(event){
var touch = event.targetTouches[0]; //touches The array object gets all of the values on the screen touch , take the first 1 a touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; // Take the first 1 a touch The coordinate values of
isScrolling = 0; // This parameter determines whether to scroll vertically or horizontally
this.slider.addEventListener('touchmove',this,false);
this.slider.addEventListener('touchend',this,false);
},
// mobile
move:function(event){
// When there are multiple screens touch Or if the page has been scaled, it will not be executed move operation
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 for 1 , represents longitudinal sliding, 0 Is horizontal sliding
if(isScrolling === 0){
event.preventDefault(); // The default action to block the touch event is to prevent scrolling
this.slider.className = 'cnt';
this.slider.style.left = -this.index*600 + endPos.x + 'px';
}
},
// The slide release
end:function(event){
var duration = +new Date - startPos.time; // The duration of the slide
if(isScrolling === 0){ // When scrolling horizontally
this.icon[this.index].className = '';
if(Number(duration) > 10){
// Determine whether to move left or right when the offset is greater than 10 When performing
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';
}
// Unbundling event
this.slider.removeEventListener('touchmove',this,false);
this.slider.removeEventListener('touchend',this,false);
}
},
// Initialize the
init:function(){
var self = this; //this Refers to the slider object
if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener The first 2 Three parameters can be passed 1 It will call this object handleEvent attribute
}
};
slider.init();
</script>
</body>
</html>That's all for this article, I hope you enjoy it.