特效描述:基于jQuery 手指上下滑动 滚屏特效。基于jQuery手机上手指上下滑动滚屏特效
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
2. HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;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></title> <style type="text/css"> *{ 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; } .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> <script type="text/javascript"> $(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"); } } ); } ); </script> </head> <body onmousewheel="return false;"> <div class="container"> <div class="page page0 cur"><h1>你好,我是0号屏幕</h1> </div> </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" /> </body> </html>