AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

移动端横屏的JS代码(beta)

51自学网 http://www.wanshiok.com
移动端横屏

废话不多说了,直接给大家贴代码了

具体代码如下所示:

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


移动端横屏  
上一篇:Bootstrap所支持的表单控件实例详解  下一篇:js实现带农历和八字等信息的日历特效