H5竖屏模板

【html-头部】

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no">

<meta content="yes" name="app-mobile-web-app-capable">

<meta content="black" name="app-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta name="msapplication-tap-highlight" content="no">

<link rel="stylesheet" type="text/css" href="css/style.css" />

<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />

<link rel="stylesheet" type="text/css" href="css/animate.min.css" />

<script src="http://tools.people.com.cn/libs/jquery/1.11.1/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

【html-内容区】

<div id="page-landscape" class="page-landscape">

<img src="imgs/phone.png" alt=""/>

<h3>为了更好的体验，请使用竖屏浏览</h3>

</div>



<div id="page-portrait" class="page-portrait">



<div class="load-page" id="loadingPage">

<div class="img-load-now">



<img src="imgs/loading.gif" alt="" class="loading-img">

<p id="loadTxt">0%</p>

</div>

</div>



<div class="swiper-container page-box" id="pageContainer">

<div class="swiper-wrapper">



<div class="swiper-slide pageOne">

<h1>第一页</h1>

<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s">

内容内容

</p>

<img src="imgs/arrow.png" alt="" class="arrow ani" swiper-animate-effect="up" swiper-animate-delay="1s">

</div>



<div class="swiper-slide pageTwo">

<h1>第二页</h1>

<h4 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">标题内容</h4>

<img src="imgs/arrow.png" class="arrow ani" swiper-animate-effect=" up" swiper-animate-delay="1s" alt="" />

</div>



<div class="swiper-slide pageThree" >

<h1>第三页</h1>

<h4 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">标题内容</h4>

<img src="imgs/arrow.png" class="arrow ani" swiper-animate-effect=" up" swiper-animate-delay="1s" alt="" />

</div>



<div class="swiper-slide pageFour" >

<h1>第四页</h1>

<h4 class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">标题内容</h4>

<img src="imgs/arrow.png" class="arrow ani" swiper-animate-effect=" up" swiper-animate-delay="1s" alt="" />

</div>

</div>

</div>

</div>

【html-尾部】

</body>

<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/swiper.animate.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var swiper;

</script>

<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

</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<imgArray.length;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();

}

}

}

最后编辑于：2021.01.29 08:13:42

禁止转载，如需转载请通过简信或评论联系作者。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,793评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,567评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,342评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,825评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,814评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,680评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,033评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,687评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,175评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,668评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,775评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,419评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,020评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,978评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,206评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,092评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,510评论 2赞 343

H5竖屏模板

推荐阅读更多精彩内容