jquery手机全屏上下滑动

demo下载地址:http://download.csdn.net/detail/cometwo/9406374

<!DOCTYPE html>
<html>

    <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>
        <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" 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 > 5) { //此处定义全屏滑动张数 nowpage = 5; } 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 style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
                    <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗或手机浏览器 </p>
                    <p>来源:<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
                </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 class="page page1">
                <h1>你好,我是1号屏幕,我又回来了</h1>
                <img class="no1" src="img/1.png" />
                <img class="no2" src="img/2.png" />
            </div>
        </div>

        <img class="xiangxiatishi" src="img/prompt.png" />

    </body>

</html>

你可能感兴趣的:(jquery,手机,全屏上下滑动)