长图横竖屏h5

image.png

效果图

加载页：

image.png

竖屏时，只能看到遮罩层：

image.png

横屏时，遮罩层消失，内容显现：

image.png

开发遇到问题以及需要注意问题：

1） 单位计算：

用了百分比做单位布局（图片：元素高度/设计稿的总高度），其他位置调整也是这样计算）

2）媒体查询（横竖屏设置不同屏幕宽度的尺寸（用百分比））

/横屏/
@media screen and (max-width:731px) and (orientation: landscape){
html,body{height:100%; width:294.8%; background-color:#1f8e59; overflow-y:hidden; overflow-x:auto;}
}
@media (min-width: 732px) and (max-width:812px) and (orientation: landscape){
html,body{height:100%; width:267.2%;background-color:#1f8e59; overflow-y:hidden; overflow-x:auto;}
}
@media (min-width: 732px) and (max-width:812px) and (orientation: landscape){
html,body{height:100%; width:267.2%;background-color:#1f8e59; overflow-y:hidden; overflow-x:auto;}
}
@media (min-width: 801px) and (orientation: portrait){
.hide{
opacity: 1 !important;
}
}
/竖屏/
@media screen and (max-width:800px) and (orientation: portrait){
html,body{height:100%;width:500%;background-color:#1f8e59; overflow-y:hidden; overflow-x:auto;}
//设置横屏时候加载完有些动画直接显示出来
.txt2{
opacity: 1 !important;
}
.txt3{
opacity: 1 !important;
}
.txt4{
opacity: 1 !important;
}
.txt7{
opacity: 1 !important;
}
.txt5{
opacity: 1 !important;
}
.txt6{
opacity: 1 !important;
}
.txt8{
opacity: 1 !important;
}
.txt9{
opacity: 1 !important;
}
}

3) 横竖屏判断，强制刷新问题，安卓微信有缓存，需要用到url随机数来设置强制刷新方法(需要注意此地方：如果利用window.reload来强制刷新，ios正常，可是安卓手机强制刷新失效)

function updateUrl(url,key)
{
var key = (key || 't') + '='; //默认是“t”
var reg = new RegExp(key + '\d+');//正则：t=1472286066028
var timestamp = +new Date();
if(url.indexOf(key)>-1)//有时间戳，直接更新
{
return url.replace(reg, key + timestamp);
}
else //没有时间戳，加上时间戳
{
if(url.indexOf('?')>-1)
{
var urlArr = url.split('?');
if(urlArr[1])
{
return urlArr[0] + '?' + key + timestamp + '&' + urlArr[1];
}
else
{
return urlArr[0] + '?' + key + timestamp;
}
}
else
{
if(url.indexOf('#')>-1)
{
return url.split('#')[0]+'?'+key+timestamp+location.hash;
}
else
{
return url + '?' + key + timestamp;
}
}
}
}

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
window.addEventListener("orientationchange", function() {
// var len = window.location.href.indexOf("?");
// if(len>0){
// window.location.href=window.location.href.substring(0,len)+"?"+Math.random();
// }else{
// window.location.href=window.location.href+"?"+Math.random();
// }
alert('19');

if(width>height){
// location.reload(true);
// window.location.href="index.html";
window.location.href=updateUrl(window.location.href);
console.log("竖屏模式！");
// alert("竖屏模式！");
// window.location.href=window.location.href;
}else{
// location.reload();
// window.location.href="index.html";
window.location.href=updateUrl(window.location.href);
console.log("横屏模式！");
// alert("横屏模式！");
// window.location.href=window.location.href;
}
}, false);

4）当手滑动到哪范围动画元素就显示，超出此范围就消失：

.user4{
height:20.16%;
width:auto;
position: absolute;
z-index: 4;
left: 16.89%;
top: 64.06%;
}
@-webkit-keyframes user4{
0%{
opacity: 1;
-webkit-transform: translateX(-40%);
}
100%{
opacity: 1;
-webkit-transform: translateX(0%);
}
}
@keyframes user4{
0%{
opacity: 1;
transform: translateX(-40%);
}
100%{
opacity: 1;
transform: translateX(0%);
}
}

其他一些类名设置：
.common{
display: block;
}
.hide{
opacity: 0;
}
.user4_1{
-webkit-animation:user4 .6s .5s linear forwards alternate;
animation:user4 .6s linear .5s forwards alternate;
}

Js代码：

//计算动画移动到这个范围时，显示出来
var num=$(".user4").offset().left-$(window).scrollLeft();

if(num<client&&num>0){
setTimeout(function () {
$('.user4').addClass("show");
},500);
$('.user4').addClass("user4_1");

}else{
setTimeout(function () {
$('.user4').removeClass("show");
},500);

$('.user4').removeClass("user4_1");

}

最终js代码：

（先隐藏动画，一开始不设置动画，滚动到这个元素的位置，才显示这个动画，超出这个范围，再设置取消这个动画）
$(function () {
window.onscroll = scroll;

function scroll(){    var num=$(".user4").offset().left-$(window).scrollLeft(); 
    // console.log("num2:"+num2);
    var client=document.documentElement.clientWidth-100;   
    if(num<client&&num>0){
        setTimeout(function () {
            $('.user4').addClass("show");
        },500);
        $('.user4').addClass("user4_1");

    }else{
        setTimeout(function () {
            $('.user4').removeClass("show");
        },500);

        $('.user4').removeClass("user4_1");


    }

}console.log("user4:"+$(".user4").offset().left);var scrollheight = parseInt($(document).width())-parseInt($(".holder").css("width"));console.log("滚动区域宽度大小"+scrollheight);

});

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping