利用jquery.touchSwipe.js實現的移動滑屏效果。
親測：兼容ie8及各種瀏覽器
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> 點擊下載
*{
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;
}
.container .page0{
background-color: blue;
}
.container .page1{
background-color: pink;
}
.container .page2{
background-color: yellow;
}
.container .page3{
background-color: green;
}
.container .page4{
background-color: tomato;
}
.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;
}
}
<body onmousewheel="return false;"> <div class="container"> <div class="page page0 cur"><h1>你好，我是0號屏幕</h1> </div> <div class="page page1"> <h1>你好，我是1號屏幕</h1> <!-- <img class="no1" src="img/1.png" /> <img class="no2" src="img/2.png" /> --> </div> <div class="page page2"><h1>你好，我是2號屏幕</h1></div> <div class="page page3"><h1>你好，我是3號屏幕</h1></div> <div class="page page4"><h1>你好，我是4號屏幕</h1></div> </div> <img class="xiangxiatishi" src="img/prompt.png" alt="向下來一下~"/> </body>
$(document).ready(
function() {
var nowpage = 0;
//給最大的盒子增加事件監聽
$(".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");
}
}
);
}
);