请在手机模式下使用
<!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>jQuery触摸手机全屏上下滑动滚屏特效</title><link rel="stylesheet" type="text/css" href="css/style.css" /><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"> $(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;"><h1 class="keTitle">jQuery触摸手机全屏上下滑动滚屏特效</h1><!--效果html开始--><div class="container"> <div class="page page0 cur"><h1>你好，我是0号屏幕，第一屏,鼠标单击向下拖动</h1></div> <div class="page page1"><h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1></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><!--效果html结束--></body></html>
评论