jquery手机全屏上下滑动

来源：互联网发布：淘宝0秒付款怎么做到的编辑：程序博客网时间：2024/05/17 01:01
这里写图片描述
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>
1 0