标题 | 移动端横屏的JS代码(beta) |
内容 | 这篇文章主要介绍了移动端横屏的JS代码(beta) 的相关资料,需要的朋友可以参考下 直接给大家贴代码了 具体代码如下所示: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> var orientation=0; function screenOrientationEvent(){ 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)' }); } } var innerWidthTmp = window.innerWidth; //横竖屏事件监听方法 function screenOrientationListener(){ try{ var iw = 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> <body onload="screenOrientationEvent()"> <input id="change" type="text" value=""/> </body> </html> 以上js代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释 |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。