手机端左右全屏滑动（加精）【判断PC还是移动端】

桃扇骨 2022-05-16 06:07 250阅读 0赞

## 上下滑动：[http://blog.csdn.net/libin\_1/article/details/50527583][http_blog.csdn.net_libin_1_article_details_50527583] ##

![这里写图片描述][20160321125129213]

## 下载[http://download.csdn.net/detail/cometwo/9467993][http_download.csdn.net_detail_cometwo_9467993] ##

<!DOCTYPE html>
    <html lang="en">
    
        <head>
            <title>H5单页面手势滑屏切换</title>
            <meta name="viewport" charset="utf-8" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0">
            <link rel="stylesheet" href="dist/app.css">
            <script src="js/app.js"></script>
        </head>
    
        <body>
            <div id="viewport" class="viewport">
                <div class="pageview" style="background: #3b76c0">
                    <h3>页面-1</h3>
                </div>
                <div class="pageview" style="background: #58c03b;">
                    <h3>页面-2</h3>
                </div>
                <div class="pageview" style="background: #c03b25;">
                    <h3>页面-3</h3>
                </div>
                <div class="pageview" style="background: #e0a718;">
                    <h3>页面-4</h3>
                </div>
                <div class="pageview" style="background: #c03eac;">
                    <h3>页面-5</h3>
                </div>
            </div>
            <div class="pagenumber">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </body>
    
    </html>

CSS：

.viewport,
    body,
    html {
        height: 100%;
        overflow: hidden;
        position: relative
    }
    
    body,
    html {
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial
    }
    
    .viewport {
        width: 500%;
        display: -webkit-box;
        pointer-events: none;
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden
    }
    
    .pageview {
        -webkit-box-flex: 1;
        width: 0
    }
    
    .pagenumber {
        display: -webkit-box;
        position: absolute;
        bottom: 2em;
        left: 35%;
        height: 2em;
        width: 30%
    }
    
    .pagenumber div {
        -webkit-box-flex: 1;
        width: 0;
        position: relative
    }
    
    .pagenumber .now:after {
        background: rgba(255, 255, 255, 1)!important
    }
    
    .pagenumber div:after {
        content: "";
        width: .4em;
        height: .4em;
        background: rgba(255, 255, 255, .5);
        border-radius: 2em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -.2em;
        margin-left: -.2em
    }
    
    h3 {
        text-align: center;
        font-family: Microsoft YaHei, Arial;
        color: #fff;
        font-size: 1.7em;
        font-weight: 400;
        padding: 1em 0;
        margin: 0
    }
    
    @media screen and (max-width:360px) {
        body,
        html {
            font-size: 15px
        }
    }
    
    @media screen and (min-width:360px) and (max-width:400px) {
        body,
        html {
            font-size: 16px
        }
    }
    
    @media screen and (min-width:400px) and (max-width:460px) {
        body,
        html {
            font-size: 18px
        }
    }
    
    @media screen and (min-width:460px) {
        body,
        html {
            font-size: 24px
        }
    }

js文件：

[http_blog.csdn.net_libin_1_article_details_50527583]: http://blog.csdn.net/libin_1/article/details/50527583
[20160321125129213]: /images/20220516/7d9623dd3c6e4ab595582799e757c610.png
[http_download.csdn.net_detail_cometwo_9467993]: http://download.csdn.net/detail/cometwo/9467993