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();
}
}
}
