强制旋转横屏

chengchengbox

于 2024-05-29 14:58:12 发布

阅读量579

点赞数 4

分类专栏： js jquery html 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_34297991/article/details/139295887

版权

html 同时被 3 个专栏收录

36 篇文章

订阅专栏

26 篇文章

订阅专栏

jquery

19 篇文章

订阅专栏

<html>  
<head>  
<title>测试</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
	.yanshi1{
		position:absolute;
		top:0; 
		left:100%;
		transform:rotate(90deg);
		background: linear-gradient(to right, #030b18 -50%, #133a64 50%, #030b18 150%);
		transform-origin:0 0 0;
	}
	.yanshi2{
		position:absolute;
		top:0;  
		width: 100%;
		height: 100%;
		z-index: 120;
		background: linear-gradient(to right, #030b18 -50%, #133a64 50%, #030b18 150%); 
	}  
</style> 
</head> 
<body>   
    <div class="tjc yanshi2">
        <img  src="../ceshi.png" /> 
    </div> 
</body> 
<script src="../js/jquery-3.3.1.min.js"></script>  
<script>   
	$(window).resize(function() {
		xuanzhuan();
	});
	$(function(){  
		xuanzhuan();
	}); 
	function xuanzhuan(){
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		console.log('窗口宽度: ' + windowWidth + ', 窗口高度: ' + windowHeight);
		if(windowWidth<windowHeight){ 
			$('.tjc').css('height',$(window).width()); 
			$('.tjc').css('width',$(window).height()); 
			$(".tjc").removeClass("yanshi2");
            $(".tjc").addClass("yanshi1");
		}else{ 
			$('.tjc').css('height',$(window).height()); 
			$('.tjc').css('width',$(window).width()); 
			$(".tjc").removeClass("yanshi1");
            $(".tjc").addClass("yanshi2");
		} 
	}
</script>
</html>

屏幕旋转度数 js方法

function hengshuping(){  
        var lsheight=$(document).height();
        var lswidth=$(document).width();  
        if(window.orientation==0){
            //竖屏
            $('.main').css('height',lsheight); 
            $('.main').css('width',lswidth); 
            $(".main").removeClass("yanshi2");
            $(".main").addClass("yanshi1");
        }else if(window.orientation==90){
            //横屏  
            $('.main').css('height',lswidth); 
            $('.main').css('width',lsheight);  
            $(".main").removeClass("yanshi1");
            $(".main").addClass("yanshi2");
        }
    }