移动端横屏的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;
//横竖屏事件监听方法
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代码是实现移动端横屏的核心代码，代码简单易懂，所有没给大家附太多的注释，如果大家哪里有不明白的地方欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了javascript定时器的简单应用,结合javascript事件触发控制方块移动操作分析了javascript定时器使用相关操作技巧,需要的朋友可以参考下2019-06-06
最近在做一个列表的时候，涉及到时间格式化操作。本文主要介绍了微信小程序wxs日期时间处理的实现示例，分享给大家，感兴趣的可以了解一下2021-07-07
这篇文章主要为大家详细介绍了JS+DIV实现拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之oltip提示工具的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
既然说到了JavaScript,那么就会绕不过去执行上下文,只有理解了执行上下文才能更好的理解JavaScript本身,不过本部分不是专门讲解 JavaScript的,主要从JavaScript的执行顺序开始介绍一下JavaScript是怎样运行的2023-09-09
js 分页效果实现代码，可以切换页面2009-06-06
JS电话号码验证是比较常的一种验证，下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的，还可以带有长途的区号。2015-09-09
javascript获取网页中指定节点的父节点、子节点的方法小结
如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种，下面是总结的一些方法，感兴趣的朋友可以参考下哈2013-04-04
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
这篇文章主要介绍了JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法,涉及javascript二叉树定义、赋值、遍历、查找等相关操作技巧,需要的朋友可以参考下2019-03-03
本篇文章主要介绍了详解ES6通过WeakMap解决内存泄漏问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论