单屏h5横屏详细介绍

其他 2019-04-02 14:40:55 阅读次数: 0

这里是针对容器是1136*640的背景，关于rem的处理也是以1136*640为背景，并且横屏时页面不能上下滚动的情形 采用的swiper3，如下是背景图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       html, body {
        margin: 0;
        padding: 0;
        outline: none;
        list-style: none;
        width: 100%;
        height: 100%;
        /*max-width: 6.4rem;*/
    }

    p, h3, ul, li {
        margin: 0;
        padding: 0;
    }

    ul, li {
        list-style: none;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    img {
        width: 100%;
        /*height: 100%;*/
        border: none;
    }

    input {
        border: none;
        margin: 0;
        padding: 0;
        font-size: 0.24rem;
        color: #d4b079;
        outline: none;
        background: none;
    }

    body {
        font-family: "微软雅黑";
        font-size: 0.24rem;
    }

    .clearfix:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    #content {
        //若不是单屏h5 需要滚动
        //min-width=6.4rem
        position: relative;
    }
    .swiper-container {
        width: 100%;
        //height: 100%;
        height:100vh;
    }

    #content .bg1 {
        background: url(/custom/img/act/act190228/demo/bg4.jpg) no-repeat center/cover;
        height: 6.4rem;
        position: relative;
    }
    .swiper-container-vertical .swiper-pagination-bullet {
        width: 1rem;
        height: 0.3rem;
        border-radius: 0px;
        text-align: center;
        line-height: 0.3rem;
        color: #FFFFFF;
        z-index: 999;
        font-size: 0.22rem;
        background: none;
        opacity: 1;
    }

    .a1 {
        position: absolute;
        top: 1.45rem;
        left: 0.8rem;
    }

    .a2 {
        position: absolute;
        top: 2.05rem;
        left: 0.8rem;
    }

    .a3 {
        position: absolute;
        top: 2.61rem;
        left: 0.92rem;
    }

    .a4 {
        position: absolute;
        top: 3.16rem;
        left: 1rem;
    }

    .a5 {
        position: absolute;
        top: 3.74rem;
        left: 0.95rem;
    }

    .a6 {
        position: absolute;
        top: 4.3rem;
        left: 0.9rem;
    }

    .a7 {
        position: absolute;
        top: 4.85rem;
        left: 0.6rem;
    }

    .swiper-pagination-custom .active {
        font-weight: bold;
    }

    #content .nav {
        background: url(/custom/img/act/act190228/demo/sidebar.png) no-repeat center/cover;
        width: 2.19rem;
        height: 6.4rem;
        left: 0 !important;
        position: absolute;
        top: 50%;
        margin-top: -3.2rem;
    }

    #content .home {
        position: relative;
        margin: 0 1.67rem;
        border: 0.01rem solid red;
    }

    </style>
</head>

<body>
<div id="content">
    <div class="swiper-container" id="big-swiper">
        <div class="swiper-wrapper">
            <!--首页-->
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">
                <div class="home-page bg1">
                    <div class="home">
                        <div class="logo ani  fadeInDown animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;"></div>
                        <div class="slogan ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.5s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.5s;-webkit-animation-delay:0.5s;"></div>
                        <div class="off ani  fadeInLeft animated" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0.8s" swiper-animate-style-cache=" " style="visibility: visible;animation-duration:2s;-webkit-animation-duration:2s;animation-delay:0.8s;-webkit-animation-delay:0.8s;"></div>
                        <a class="btnwsq" href="https://tlbb.qq.com/ingame/all/index.shtml#/index"></a>
                    </div>
                </div>
            </div>
        </div>
        <!--左侧导航-->
        <div class="swiper-pagination nav"></div>

</div>
<script>
    window.onload = function() {
        var tabText = ['首页', '家园介绍', '家具展示', '家园互动', '空间优化', '侠侣PK', '战力榜单'];
        var navStyle = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7'];
        var mySwiper = new Swiper('#big-swiper', {
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            direction: 'vertical',
            fadeEffect: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            paginationClickable: true,
            paginationType : 'custom',
            paginationCustomRender: function (swiper, current, total) {
                // return '<span class="' + className + '">' + (index + 1) + '</span>';
                var _html = '';
                for (var i = 0; i <= total; i++) {
                    if (current == i) {
                        _html += '<span class="swiper-pagination-custom active '+navStyle[i]+'">'+ tabText[i] + '</span>';
                    }else{
                        _html += '<span class="swiper-pagination-custom '+navStyle[i]+'">'+ tabText[i] + '</span>';
                    }
                }
                return _html;//返回所有的页码html
                return '<span class="' + className + ' ' + navStyle[index] + '">' + tabText[index] + '</span>'
            }
        })
    }
//rem转换 此时背景是1136*640
(function(win, doc) {
            if(!win.addEventListener) return;
            var html = document.documentElement;

            function setFont() {
                var cliWidth = html.clientWidth;
                var cliHeight = html.clientHeight;
                if (cliWidth>cliHeight){
                    html.style.fontSize = 100 * (cliWidth / 1136) + 'px';
                } else {
                    html.style.fontSize = 100 * (cliWidth / 640) + 'px';
                }

            }
            win.addEventListener('resize', setFont, false)
            doc.addEventListener('DOMContentLoaded', setFont, false)
        })(window, document);
    // 利用 CSS3 旋转 对根容器逆时针旋转 90 度


    var detectOrient = function () {
        var width = document.documentElement.clientWidth;
        var  height = document.documentElement.clientHeight;

            $wrapper = document.getElementById("content"),
            style = "";
        if (width >= height) { // 横屏


            style += "width:" + width + "px;";  // 注意旋转后的宽高切换
            style += "height:" + height + "px;";
            style += "-webkit-transform: rotate(0); transform: rotate(0);";
            style += "-webkit-transform-origin: 0 0;";
            style += "transform-origin: 0 0;";
            console.log("横屏")
        }
        else { // 竖屏

            style += "width:" + height + "px;";
            style += "height:" + width + "px;";
            style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
            // 注意旋转中点的处理
            style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
            console.log("竖屏")
        }
        $wrapper.style.cssText = style;
    }
    window.onresize = detectOrient;
    detectOrient();
    </script>
</body>

</html>

效果图

正常横屏显示

image.png

竖屏显示横屏样式

参考：
http://tlbb.qq.com/cp/a20180807jybbws/index.html

猜你喜欢

转载自blog.csdn.net/qq_32849999/article/details/87866558
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022