移動端橫屏的JS代碼(beta)
更新時間：2016年05月16日 10:29:33 作者：Moustache
這篇文章主要介紹了移動端橫屏的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;
//橫豎屏事件監(jiān)聽方法
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);
}
//啟動橫豎屏事件監(jiān)聽
screenOrientationListener();
</script>
<body onload="screenOrientationEvent()">
<input id="change" type="text" value=""/>
</body>
</html>
以上js代碼是實現移動端橫屏的核心代碼，代碼簡單易懂，所有沒給大家附太多的注釋，如果大家哪里有不明白的地方歡迎給我留言，小編會及時回復大家的，在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了微信小程序按鈕巧妙用法,按鈕組件功能比?HTML?中的?button?按鈕豐富，通過?open-type?屬性可以調用微信提供的各種功能（客服、轉發(fā)、獲取用戶授權、獲取用戶信息等），需要的朋友可以參考下2022-12-12
首先是通過同步策略來實現模塊加載與回調函數之間進行分離，接著是通過異步策略來實現模塊加載與回調函數之間進行分離2012-08-08
這篇文章主要介紹了JS 實現獲取驗證碼 倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10
Package.js 現代化的JavaScript項目make工具
Package.js是一個很方便的JavaScript包依賴管理及Make工具。它的設計目標是使瀏覽器端的JavaScript Component/App 開發(fā)更加模塊化2012-05-05
這篇文章主要給大家介紹了關于Echarts自定義地圖和添加圖標的相關資料,項目中經常會遇到需要渲染echarts地圖的情況,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-09-09
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次
為body標簽和document.body都添加點擊事件后僅Firefox彈出了兩次，需要的朋友可以參考下。2011-04-04
這篇文章主要為大家詳細介紹了JavaScript實現滑塊驗證解鎖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Listloading.js移動端上拉下拉刷新組件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
下面小編就為大家?guī)硪黄猚anvas繪制愛心的幾種方法總結(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Next.js是一款React 開發(fā)框架，它可以幫助我們構建 React 應用程序。作為一個輕量級React服務端渲染應用框架，這篇文章主要介紹了基于?Next.js實現在線Excel,需要的朋友可以參考下2022-08-08