移動(dòng)端橫屏的JS代碼(beta)
廢話不多說(shuō)了,直接給大家貼代碼了
具體代碼如下所示:
<!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; //橫豎屏事件監(jiān)聽(tīng)方法 function screenOrientationListener(){ try{ var iw = window.innerWidth; //屏幕方向改變處理 if(iw != innerWidthTmp){ if(iw>window.innerHeight) { orientation = 90; } else { orientation = 0; } //調(diào)用轉(zhuǎn)屏事件 screenOrientationEvent(); innerWidthTmp = iw; } } catch(e){alert(e);}; //間隔固定事件檢查是否轉(zhuǎn)屏,默認(rèn)500毫秒 setTimeout("screenOrientationListener()",500); } //啟動(dòng)橫豎屏事件監(jiān)聽(tīng) screenOrientationListener(); </script> <body onload="screenOrientationEvent()"> <input id="change" type="text" value=""/> </body> </html>
以上js代碼是實(shí)現(xiàn)移動(dòng)端橫屏的核心代碼,代碼簡(jiǎn)單易懂,所有沒(méi)給大家附太多的注釋,如果大家哪里有不明白的地方歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的,在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能
這篇文章主要介紹了JS 實(shí)現(xiàn)獲取驗(yàn)證碼 倒計(jì)時(shí)功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10Package.js 現(xiàn)代化的JavaScript項(xiàng)目make工具
Package.js是一個(gè)很方便的JavaScript包依賴管理及Make工具。它的設(shè)計(jì)目標(biāo)是使瀏覽器端的JavaScript Component/App 開(kāi)發(fā)更加模塊化2012-05-05為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次
為body標(biāo)簽和document.body都添加點(diǎn)擊事件后僅Firefox彈出了兩次,需要的朋友可以參考下。2011-04-04JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)滑塊驗(yàn)證解鎖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01Listloading.js移動(dòng)端上拉下拉刷新組件
這篇文章主要介紹了Listloading.js移動(dòng)端上拉下拉刷新組件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08canvas繪制愛(ài)心的幾種方法總結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇canvas繪制愛(ài)心的幾種方法總結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10基于Next.js實(shí)現(xiàn)在線Excel的詳細(xì)代碼
Next.js是一款React 開(kāi)發(fā)框架,它可以幫助我們構(gòu)建 React 應(yīng)用程序。作為一個(gè)輕量級(jí)React服務(wù)端渲染應(yīng)用框架,這篇文章主要介紹了基于?Next.js實(shí)現(xiàn)在線Excel,需要的朋友可以參考下2022-08-08