移动端横屏的JS代码(beta)
废话不多说了,直接给大家贴代码了
具体代码如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
varorientation=0;
functionscreenOrientationEvent(){
if(orientation==0)
{
document.getElementById("change").value="竖";
$("body").css({
'transform':'rotate(90deg)',
'-webkit-transform':'rotate(90deg)',
'-moz-transform':'rotate(90deg)'
});
}
else
{
document.getElementById("change").value="横";
$("body").css({
'transform':'rotate(0deg)',
'-webkit-transform':'rotate(0deg)',
'-moz-transform':'rotate(0deg)'
});
}
}
varinnerWidthTmp=window.innerWidth;
//横竖屏事件监听方法
functionscreenOrientationListener(){
try{
variw=window.innerWidth;
//屏幕方向改变处理
if(iw!=innerWidthTmp){
if(iw>window.innerHeight)
{
orientation=90;
}
else
{
orientation=0;
}
//调用转屏事件
screenOrientationEvent();
innerWidthTmp=iw;
}
}
catch(e){alert(e);};
//间隔固定事件检查是否转屏,默认500毫秒
setTimeout("screenOrientationListener()",500);
}
//启动横竖屏事件监听
screenOrientationListener();
</script>
<bodyonload="screenOrientationEvent()">
<inputid="change"type="text"value=""/>
</body>
</html>
以上js代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释,如果大家哪里有不明白的地方欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对毛票票网站的支持!