长图横竖屏h5

长图横竖屏h5_第1张图片
image.png

效果图

加载页:
长图横竖屏h5_第2张图片
image.png

竖屏时,只能看到遮罩层:

长图横竖屏h5_第3张图片
image.png

横屏时,遮罩层消失,内容显现:

长图横竖屏h5_第4张图片
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(num0){
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(num0){
        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

你可能感兴趣的:(长图横竖屏h5)