jquery手机全屏上下滑动-优快云博客

本文介绍如何使用jQuery实现触摸滑动效果，使页面在不同背景颜色间平滑切换，包括代码示例、关键CSS样式设置及浏览器兼容性说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

demo下载地址：http://download.youkuaiyun.com/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>