廢話不多說了,直接給大家貼代碼了
具體代碼如下所示:
<!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代碼是實現移動端橫屏的核心代碼,代碼簡單易懂,所有沒給大家附太多的注釋,如果大家哪里有不明白的地方歡迎給我留言,小編會及時回復大家的,在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答