The following code has been tested without problems and can be cycled
<! DOCTYPE html>
<meta name= "renderer" content= "WebKit" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<TITLE>HTML5 Test </title>
<link href= "Css/index.css" rel= "stylesheet"/>
<body>
<div id= "Index" style= "text-align:center; Width:auto; " >
</div>
<script src= "/js/jquery-1.12.4.min.js" ></script>
<script>
Initialize the width of the screen to get the browser
var loadwidth = parseint ($ (window). width ());
Initialize Touch start X axis
var loadx = 0;
Initialize Touch start Y axis
var loady = 0;
Initializes the x-axis of the mouse release
var MoveUp = 0;
$ (function () {
//
$ (". Imagestart"). On (' Touchstart ', function (e) {
var id = e.originalevent.targettouches[0];
Gets the starting position of the mouse X
var x = Id.pagex;
Assignment Start position x
LOADX = x;
The coordinates of the mouse when clicked will update the variable when it is moved.
MoveUp = x;
Gets the start position of the mouse y
var y = id.pagey;
Loady = y;
$ (this). css (' position ', ' fixed ');
})
//
//
$ (". Imagestart"). On ("Touchmove", function (e) {
var id = e.originalevent.targettouches[0];
Gets the position of the mouse every move x
var x = Id.pagex;
MoveUp = x;
Gets the position of the mouse every move y
var y = id.pagey;
var thisload = $ (this); var ddd = X-LOADX;
Moving elements
Thisload.animate ({' Left ': X-loadx + "px"}, 0);
if ($ (this). attr ("data-id") = = 3) {
$ (". Imagestart"). Hide ();
$ (". Imagestart"). EQ (0). Show ();
} else {
$ (this). Next (). Show ();
}
})
//
//
$ (". Imagestart"). On ("Touchend", function (e) {
Calculate how much the mouse movement starts to the end of the x-axis when the finger is released
var MoveX = Loadx-moveup;
if (movex<0) {
MoveX = MOVEUP-LOADX;
}
$ (". Imagestart"). CSS ("left", "0px");
If you move an x-axis that is larger than 3/10 of the browser width, change the picture
if (Movex/loadwidth > 0.4) {
if ($ (this). attr ("data-id") = = 3) {
Hide All
$ (". Imagestart"). Hide ();
Clears the style of the element
$ (". Imagestart"). Removeattr ("style");
Let the first one Show
$ (". Imagestart"). EQ (0). CSS ("Display", "block");
} else {
Hides the current
$ (this). CSS ("display", "none");
Show next Element
$ (this). Next (). Show ();
}
} else {
If the moved position of the screen is less than 40%, the picture is returned to the original position
$ (this). Animate ({"LETF": "0px"},0);
}
Restore initial coordinates
LOADX = 0;
Restore Mouse Release coordinates
MoveUp = 0;
})
//
})
</script>
</body>
HTML5 Mobile Touch Swipe Event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
