To introduce two jquery plugins, you can download them online.
<script src= "Jquery-1.11.1.min.js" ></script>
<script src= "Js/jquery.touchswipe.min.js" ></script>
The code is as follows:
<! DOCTYPE HTML >
<meta charset= "UTF-8" >
<meta content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, Maximum-scale=1.0,user-scalable=no" Name= "viewport" id= "viewport"/>
<title>jquery.touchswipe on the mobile phone on the slide screen effect code </title>
<style>
* {margin:0; padding:0;}
HTML, body {width:100%; height:100%; overflow:hidden;}
. container {width:100%; height:100%; position:absolute; left:0; top:0%;}
. Container. page {height:100%; position:relative; color: #fff; text-align:center;}
. container page h1{padding-top:120px; line-height:50px; Display:block}
. container. page0 {background-color:blue;}
. container. Page1 {background-color: #93F;}
. container. Page2 {background-color: #F90;}
. container. page3 {background-color:green;}
. container. page4 {Background-color:tomato;}
. container. Page1 img.no1 {position:absolute; left:10px; top:50px;-webkit-transition:all 1s ease 0s;}
. container. Page1.cur img.no1 {-webkit-transform:rotate (720deg);}
. container. Page1 Img.no2 {position:absolute; left:600px; top:50px;-webkit-transition:all 1s ease 2s;}
. container. page1.cur Img.no2 {left:30px; top:100px;-webkit-transform:rotate (720deg);}
. xiangxiatishi {position:fixed; bottom:20px; left:50%;-webkit-transform:translatex ( -50%);-webkit-animation:dong 1s linear 0s infinite alternate; }
@-webkit-keyframes Dong {from {bottom:20px;} to {bottom:60px;}}
</style>
<body onmousewheel= "return false;" >
<!--code section begin-->
<div class= "Container" >
<div class= "page page0 cur" >
</div>
<div class= "Page Page1" >
</div>
<div class= "Page Page2" >
</div>
<div class= "Page Page3" >
</div>
<div class= "Page page4" >
</div>
</div>
<script src= "Jquery-1.11.1.min.js" ></script>
<script src= "Js/jquery.touchswipe.min.js" ></script>
<script>
$ (document). Ready (
function () {
var nowpage = 0;
Add event monitoring to the largest box
$ (". Container"). Swipe (
{
Swipe:function (event, direction, distance, duration, Fingercount) {
if (Direction = = "Up") {
Nowpage = nowpage + 1;
}else if (Direction = = "Down") {
Nowpage = nowpage-1;
}
if (Nowpage > 4) {
Nowpage = 4;
}
if (Nowpage < 0) {
nowpage = 0;
}
$ (". Container"). Animate ({"Top": nowpage *-100 + "%"},400);
$ (". Page"). EQ (nowpage). addclass ("cur"). Siblings (). Removeclass ("cur");
}
}
);
}
);
</script>
<!--code section end-->
</body>
jquery implementation of the mobile phone slide on the effect of sliding screen code