H5竖屏模板

【html-头部】

【html-内容区】

   

   

为了更好的体验，请使用竖屏浏览

   

   

       

           

           

           

0%

       

   

   

   

       

           

           

               

第一页

               

                    内容内容

               

               

           

           

           

               

第二页

               

标题内容

               

           

           

           

               

第三页

               

标题内容

               

           

           

           

               

第四页

               

标题内容

               

           

       

   

【html-尾部】

【css】

/*reset*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,

header,menu,nav,output,ruby,section,summary,time,mark,audio,video{

margin: 0;padding: 0;border: 0;font: inherit;}

body{font-family: Arial, "STHeiti", Helvetica Neue, Helvetica, sans-serif;

background: #fff;font-size: 14px;height: 100%;line-height: 1.5;

-webkit-tap-highlight-color: transparent;margin: 0;padding: 0;color:#000}

/*

STHeiti 苹果黑体

-webkit-tap-highlight-color: transparent;只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。

*/

button,input {line-height: normal;}

button,select {text-transform: none;}  /*定义带有小写字母和大写字母的标准的文本*/

button,html input[type="button"],input[type="reset"],input[type="submit"] {

-webkit-appearance: button;  /*将按钮设置成iOS中默认原生控件的样式*/

cursor: pointer;

}

button[disabled],html input[disabled] {cursor: default;}

input[type="checkbox"],input[type="radio"] {

box-sizing: border-box;  /*减去边框和内边距才能得到内容的宽度和高度*/

padding: 0;}

input[type="search"] {

-webkit-appearance: textfield;  /*将元素呈现为文本字段*/

-moz-box-sizing: content-box;  /*在宽度和高度之外绘制元素的内边距和边框,即padding和border不能算在内*/

-webkit-box-sizing: content-box;

box-sizing: content-box;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} /*去除浏览器默认样式*/

button::-moz-focus-inner,input::-moz-focus-inner {

border: 0;padding: 0;}

textarea {overflow: auto;vertical-align: top;}

table {border-collapse: collapse;  /*边框会合并为一个单一的边框*/

border-spacing: 0; /*相邻单元格的边框间的距离*/}

ul li {list-style: none;}

html,body {position: relative;height: 100%;}

/********横竖屏*******/

.page-landscape {width: 100vw;height: 100vh;background: #333;position: relative;

z-index: 999;display: none;}

.page-landscape img {width: 1.11666667rem;height: 1.81666667rem;position: absolute;

left: 4.58333333rem;top: 0.83333333rem;

-webkit-animation: rotateImg infinite 1.5s ease-in-out;

animation: rotateImg infinite 1.5s ease-in-out;}

.page-landscape h3 {font-size: 16px;position: absolute;color: #fff;left: 50%;

top: 3.5rem;transform: translate(-50%, -50%);/*实现水平垂直居中*/}

@keyframes rotateImg {

    0% {transform: rotate(0deg);}

    35% {transform: rotate(90deg);}

    65% {transform: rotate(90deg);}

    100% {transform: rotate(0deg);}

}

.page-portrait {

    width: 100vw;

    height: 100vh;

    position: absolute;

    left: 0;

    top: 0;

    overflow: hidden;

    -webkit-overflow: hidden;

    background-image: url(../img/bg.png);

    background-size: contain;

  }

  .load-page {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

  }

  .load-page .img-load-now {

    width: 100%;

    text-align: center;

    position: absolute;

    left: 0;

    top: 50%;

    transform: translate(0, -50%);

  }

  .load-page .img-load-now .loading-img {

    width: 0.32rem;

    height: 0.32rem;

    margin-bottom: 0.53333333rem;

  }

  .load-page .img-load-now p {

    width: 100%;

    text-align: center;

  }

  /*************************正文************************/

  .page-box {

    width: 100vw;

    height: 100vh;

    position: relative;

    display: none;

  }

  .swiper-slide {

    text-align: center;

    font-size: 18px;

    background: #fff;

    /* Center slide text vertically */

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

  }

  .swiper-slide h1 {

    width: 100%;

    text-align: center;

    font-size: 0.64rem;

    margin: 0.26666667rem;

  }

  .pageOne {

    background: #50abe9;

  }

  .pageTwo {

    background: #888;

  }

  .pageThree {

    background: #990;

  }

  .pageFour {

    background: #808;

  }

  .arrow {

    width: 0.84rem;

    height: 0.64rem;

    position: absolute;

    bottom: 0.8rem;

    left: 4.58rem;

  }

  .up {

    animation: up 1.5s  linear infinite;

    -webkit-animation: up 1.5s  linear infinite;

  }

  @keyframes up {

    0% {

      opacity: 0;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    10% {

      opacity: 1;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    100% {

      opacity: 1;

      transform: translateY(6px);

      -webkit-transform: translateY(6px);

    }

  }

  @-webkit-keyframes up {

    0% {

      opacity: 0;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    10% {

      opacity: 1;

      transform: translateY(0);

      -webkit-transform: translateY(0);

    }

    100% {

      opacity: 1;

      transform: translateY(6px);

      -webkit-transform: translateY(6px);

    }

  }

【js】

/******rem *******/

(function(win){

    var remCalc = {};

    var docEl = win.document.documentElement,

        tid,

        hasRem = true;

    hasZoom = true;

    designWidth = 750;

    function refresh(){

        var width = docEl.getBoundingClientRect().width;  //获取移动设备的宽度

        if(hasRem){

            var rem = width/10;  //将屏幕宽度分成10份

            docEl.style.fontSize = rem + "px";  //设置html的字号为第二行的值

            remCalc.rem = rem;

            var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);

            if(actualSize!== rem && actualSize>0 && Math.abs(actualSize-rem)>1){

                var remScaled = rem*rem/actualSize;

                docEl.style.fontSize = remScaled + "px";

            }

        }

        if(hasZoom){

            var style = document.getElementById('y_style');

            if(!style){

                style = document.createElement('style');

                style.id = 'y_style';

            }

            style.innerHTML = '._z{zoom:'+ width/designWidth + '}';

            document.getElementsByTagName('head')[0].appendChild(style);

        }

    }

    function dbcRefresh(){

        clearTimeout(tid);

        tid = setTimeout(refresh,100);

    }

    win.addEventListener("resize",function(){

        dbcRefresh()

    },false);

    win.addEventListener("pageshow",function(e){

        if(e.persisted){

            dbcRefresh()

        }

    },false);

    refresh();

    if(hasRem){

        remCalc.refresh = refresh;

        remCalc.rem2px = function(d){

            var val = parseFloat(d)/this.rem;

            if(typeof d==="string" && d.match(/px$/)){

                val+="rem";

            }

            return val

        };

        win.remCalc = remCalc;

    }

})(window);

function ImgLoadingByFile(imgArray,loadPageID,loadTxtID,showpageID){

    function complete(long){

        var timer = setTimeout(function(){

            $('#'+loadPageID).hide();

            $('#'+showpageID).show();

            swiper = new Swiper('.swiper-container', {

                pagination: '.swiper-pagination',

                paginationClickable: true,

                direction: 'vertical',

                onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

                    swiperAnimateCache(swiper); //隐藏动画元素

                    swiperAnimate(swiper); //初始化完成开始动画

                },

                onSlideChangeEnd: function(swiper){

                    //console.log(333);

                    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

                }

            });

            $('.arrow').click(function(){

                swiper.slideNext();

            });

            clearTimeout(timer);

        },long);

    }

    if(sessionStorage.getItem("pageloaded")){

        $('#'+loadTxtID).html('100%');

        complete(1300);

    }else{

        var imgLoad = 0;

        var btime = new Date();

        if(imgArray.length>0){

            var imgTotal = imgArray.length;

            var percent = 0;

            var img = [];

            for(var i = 0;i

                img[i] = new Image();

                img[i].src=imgArray[i];

                img[i].onload = function(){

                    imgLoad++;

                    percent = parseInt(imgLoad/imgTotal*100);

                    $('#'+loadTxtID).html(percent+'%');

                    console.log(percent);

                    if(percent>=100){

                        var etime = new Date();

                        console.log(etime-btime);

                        if(etime-1000>btime){

                            complete(100);

                        }else{

                            complete(200);

                        }

                        //alert(etime-btime);

                        sessionStorage.setItem("pageloaded", "true");

                    }

                }

            }

        }

    }

}

//横屏

function landscape(){

    //var w = window.innerWidth;

    //var h = window.innerHeight;

    var w = window.Utils.windowW();

    var h = window.Utils.windowH();

    $("body").css({"width":w,"height":h});

    $('#page-landscape').css({"width":w,"height":h}).show();

    $('#page-portrait').css({"width":w,"height":h});

    //$('#page-landscape').show();

}

var firstInit = true;

//竖屏

function portrait(){

    var w = window.Utils.windowW();

    var h = window.Utils.windowH();

    //初始化加载

    if(firstInit){

        $("body").css({"width":w,"height":h});

        $('#page-portrait').css({"width":w,'height':h}).show();

        $('#page-portrait').show();

        $('#page-landscape').hide();

        var imgFile = [

            "imgs/music-close.png",

            "imgs/music-open.png"

        ];

        ImgLoadingByFile(imgFile,'loadingPage','loadTxt','pageContainer');

        firstInit = false;

    }else {

        //$('#page-portrait').show();

        //$('#page-landscape').hide();

        $("body").css({"width":w,"height":h});

        $('#page-portrait').css({"width":w,'height':h}).show();

        $('#page-landscape').hide();

    }

}

(function() {

    "use strict";

    function Utils() {

    }

    Utils.isWeiXin = function(){

        return navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/);

        //判断是否在微信浏览器内

    };

    Utils.isQQ = function(){

        return navigator.userAgent.ua.match(/QQ\/([\d\.]+)/);

    };

    Utils.isQZone = function(){

        return navigator.userAgent.ua.indexOf("Qzone/") !== -1;

    };

    Utils.isIos = function() {

        return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

    };

    Utils.isIPhone = function() {

        return navigator.userAgent.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1;

    };

    Utils.isIpad = function() {

        return navigator.userAgent.indexOf('iPad') > -1;

    };

    Utils.isAndroid = function() {

        var u = navigator.userAgent;

        return navigator.userAgent.indexOf('Android') > -1 || u.indexOf('Linux') > -1;

    };

    Utils.isMobile = function() {

        // var u = navigator.userAgent;

        return navigator.userAgent.match(/(iPhone|iPod|Android|ios|SymbianOS)/i) != null;

    };

    // ## 屏幕方向

    Utils.isPortrait = function() {

        if (!Utils.isMobile()) {

            //alert(111);

            return true;

        }

        // 安卓版 微信里面 只用判断 width 和 height

        if (Utils.isAndroid() && Utils.isWeiXin()) {

            if (Utils.windowW() < Utils.windowH()) {

                //alert(22);

                return true;

            } else {

                //alert(331);

                return false;

            }

        }

        var orientation = window['orientation'];

        if (orientation||orientation==0) {

            if (orientation == 90 || orientation == -90) {

                return false;

            }else{

                return true;

            }

        } else {

            if (Utils.windowW() < Utils.windowH()) {

                return true;

            } else {

                return false;

            }

        }

    };

    // ## jquery 获取 window 的宽度

    Utils.windowW = function() {

        // var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

        return $(window).width();

    };

    // ## jquery 获取 window 的高度

    Utils.windowH = function() {

        return $(window).height();

    };

    window.Utils = Utils;

}());

$(function(){

    onResize();

    if (!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {

        window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", onResize, false);

    }else{

        window.addEventListener( "resize", onResize, false);

    }

});

function  onResize() {

    if(Utils.isPortrait()){

        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

            var timer = setTimeout(function(){

                portrait();

                clearTimeout(timer);

            },100);

        }else{

            portrait();

        }

    } else {

        if(!!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){

            var timer = setTimeout(function(){

                landscape();

                clearTimeout(timer);

            },100);

        }else{

            landscape();

        }

    }

}