JS case 5-mobile terminal touch screen sliding

JS case 5-mobile terminal touch screen sliding
The sliding effect of the mobile touch screen is actually image carousel, which is well implemented on the PC page and completed by binding events such as click and mouseover. However, to achieve this carousel effect on mobile devices, the core touch event is required. Processing touch events can track every finger that slides on the screen. There are four touch events touchstart: // trigger the touchmove when the finger is placed on the screen: // trigger the touchend when the finger is slide on the screen: // trigger the touchcancel when the finger leaves the screen: // triggered when the touch event is canceled by the system. If this event is rarely triggered, an event object is generated. The event object includes the following three additional touch lists: // The list of all fingers on the current screen targetTouches: // The list of fingers on the current dom element. Use this instead of touches changedTouches: // The list of fingers involving the current event, try to use this to replace touches. Each touch in these lists is composed of touch objects, which contain touch information. The main attributes 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 SC ReenX/screenY: // the ID of the touch point identifier: // The ID target of the touch object relative to the screen position. // The current DOM element. Note: When the finger slides the entire screen, will affect the behavior of the browser, such as scrolling and scaling. Therefore, when calling the touch event, you must disable scaling and scrolling. 1. Disable scaling through meta tags. <Meta name = "viewport" content = "target-densitydpi = 320, width = 640, user-scalable = no"> 2. preventDefault: the default action of the touch event is to prevent scrolling. Event. preventDefault (); Case: The following example shows the effect on a mobile device. 1. Define the event handler function of touchstart and bind the event: if (!! Self. touch) self. slider. addEventListener ('touchstart', self. events, false); // defines the touchstart event processing function start: function (event) {event. preventDefault (); // The default action that prevents touch events, that is, to block scrolling var touch = event. touches [0]; // The touches array object obtains all the touch on the screen, and obtains the first touch startPos = {x: touch. pageX, y: touch. pageY, time: + new Date}; // obtain the coordinate value of the first touch // bind the event this. slider. addEventListener ('touchmove ', this, false); this. slider. addEventListener ('touchend ', This, false) ;}, after the touchstart event is triggered, an event object is generated. The event object contains the touch list, obtains the first touch on the screen, and writes down its pageX, the coordinates of pageY. In this case, the touchmove and touchend events are bound. 2. Define the movement of fingers on the screen and the touchmove function. // Move: function (event) {event. preventDefault (); // block the default action of a touch event, that is, to prevent scrolling. // when multiple touch or pages on the screen are zoomed, the move operation if (event. touches. length> 1 | event. scale & event. scale! = 1) return; var touch = event. touches [0]; endPos = {x: touch. pageX-startPos. x, y: touch. pageY-startPos. y}; // execute the operation to move the element this. slider. className = 'cnt '; this. slider. style. left =-this. index * 600 + endPos. x + 'px ';}. First, the Page scrolling behavior is also blocked. After touchmove is triggered, an event object is generated. In the event object, the touches touch screen list is obtained and the first touch is obtained, write down the coordinates of pageX and pageY, calculate the difference value, and get the offset of the finger sliding to slide the current DOM element. 3. Define the events that the finger picks up from the screen and the touchend function. // Slide to release end: function (event) {var duration = + new Date-startPos. time; // sliding duration this. icon [this. index]. className = ''; if (Number (duration)> 100) {// determines whether to move left or right. if the offset is greater than 50, run if (endPos. x> 50) {if (this. index! = 0) this. index-= 1;} else if (endPos. x <-50) {if (this. index! = 4) this. index + = 1 ;}} this. slider. className = 'cnt f-anim '; this. slider. style. left =-this. index * 600 + 'px '; this. icon [this. index]. className = 'curr'; // unbind event this. slider. removeEventListener ('touchmove ', this, false); this. slider. removeEventListener ('touchend', this, false);}, the function executed after the finger leaves the screen. Here, we first determine the time when the finger stays on the screen. If the time is too short, we will not execute this function. Determine whether the finger slides left or right, and perform different operations respectively. The last important thing is to remove the touchmove and touchend binding events. Source code: Copy code 1 <! DOCTYPE html> 2