jq横屏

最新推荐文章于 2025-04-17 11:30:46 发布

ahboa

最新推荐文章于 2025-04-17 11:30:46 发布

阅读量326

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_46008251/article/details/103501708

版权

本文介绍了如何利用jQuery库创建横屏展示效果，包括切换图片、响应式布局和动画过渡等关键技术，适用于全屏背景或者横幅展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<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;" />
<script type="text/javascript">
  document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";window.onresize=function(){document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+"px";};
</script>
<script type="text/javascript" src="js/jquery-1.11.1/jquery.js"></script>
<script type="text/javascript" src="js/vconsole.min.js"></script>
<script type="text/javascript" src="js/jweixin-1.4.0.js"></script>
<script>

window.onload = function() {
    // 初始化
    var vConsole = new VConsole();
}

</script>
<style type="text/css">

*{margin: 0;padding: 0;}

@media screen and (orientation: portrait) { /*竖屏*/
    html{
        width: 100%;
        height: 100%;
        background: green;
        overflow: hidden;
    }
    body{
        width: 100%;
        height: 100%;
        background: cyan;
        overflow: hidden;
    }
    #main{
        position: absolute;
        background: lightgreen;
    }
}
@media screen and (orientation: landscape) { /*横屏*/
    html{
        width: 100%;
        height: 100%;
        background: blue;
    }
    body{
        width: 100%;
        height: 100%;
        background: lightblue;
    }
    #main{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: lightlime;
    }
}
#main p{
    margin: auto;
    margin-top: .2rem;
    font-size: .5rem;
    text-align: center;
}


</style>
</head>
<body>


<div id="main">
    <p>我是一个页面</p>
</div>




<script type="text/javascript">


isHor()
function isHor(){
    var width = document.documentElement.clientWidth;
    var height =  document.documentElement.clientHeight;
    if( width < height ){
        console.log(width + "<--宽--|--高-->" + height);
        $main = $('#main');
        $main.width(height);
        $main.height(width);
        $main.css('top',  (height-width)/2 );
        $main.css('left',  0-(height-width)/2 );
        $main.css('transform' , 'rotate(90deg)');
        $main.css('transform-origin' , '50% 50%');
    }

    var evt = "onorientationchange" in window ? "orientationchange" : "resize";

    window.addEventListener(evt, function() {
        console.log(evt);
        var width = document.documentElement.clientWidth;
        var height =  document.documentElement.clientHeight;
        $main =  $('#main');
        if( width > height ){
            $main.width(width);
            $main.height(height);
            $main.css('top', 0);
            $main.css('left', 0);
            $main.css('transform', 'none');
            $main.css('transform-origin', '50% 50%');
        }else{
            $main.width(height);
            $main.height(width);
            $main.css('top',(height-width)/2 );
            $main.css('left',0-(height-width)/2 );
            $main.css('transform', 'rotate(90deg)');
            $main.css('transform-origin', '50% 50%');
        }
    }, false);
}


</script>
</body>
</html>