<!DOCTYPE html> <html> <head lang="ch"> <meta charset="UTF-8"> <title>中国银行</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <!--<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>--><script type="text/javascript" src="http://www.163css.com/myweb/hihilinxuan/template/hihilinxuan/cssjs/2012/12/ifengtouch/js/jquery.touchSwipe.min.js"></script> <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>--> <style> html, body { width: 100%; height: 100%; overflow: hidden; } .container { display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .page { height: 100%; position: relative; } #screen1{ background-color: #ddd; position: absolute; width: 100%; height: 100%; } #screen2{ position: absolute; background-color: pink; width: 100%; height: 100%; } #screen3{ position: absolute; background-color: #00f; width: 100%; height: 100%; } #screen4{ position: absolute; background-color: lightblue; width: 100%; height: 100%; } </style> </head> <body > <!--<div id="start12" data-role="page" style="display: none">--> <!--<h1>竖屏效果更佳</h1>--> <!--</div>--> <div class="container" > <div class="page page1 cur"> <div class="content"> <div class="top"> <div id="screen1" style="">1</div> </div> </div> </div> <div class="page page2"> <div class="content"> <div class="top" > <div id="screen2" style="">2</div> </div> </div> </div> <div class="page page3"> <div class="content"> <div class="top" > <div id="screen3" style="">3</div> </div> </div> </div> <div class="page page4"> <div class="content"> <div class="top" > <div id="screen4" style="">4</div> </div> </div> </div> </div> </body> <script> $(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 >= 3) { nowpage = 3; } if (nowpage < 0) { nowpage = 0; } $(".container").animate({"top": nowpage * -100 + "%"}, 400); $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur"); } } ); } ); </script> </html>
手机端上下滑动换页效果(二)
最新推荐文章于 2021-09-05 12:41:16 发布