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


Posted in Javascript onMay 16, 2016

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

具体代码如下所示:

<!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 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
js实现带农历和八字等信息的日历特效
May 16 #Javascript
jQuery 常用代码集锦(必看篇)
May 16 #Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 #Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 #Javascript
javascript实现起伏的水波背景效果
May 16 #Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 #Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 #Javascript
You might like
PHP入门学习笔记之一
2010/10/12 PHP
php数组删除元素示例
2014/03/21 PHP
js 小贴士一星期合集
2010/04/07 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JS画线(实例代码)
2013/11/20 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python json转字典字符方法实例解析
2020/04/13 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
农村党支部先进事迹
2014/01/14 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
励志演讲稿大全
2014/08/21 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
法人代表证明书格式
2014/10/01 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL