移动端横屏的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代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释,如果大家哪里有不明白的地方欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对毛票票网站的支持!