移动端横屏的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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
使用js实现数据格式化
Dec 03 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
js选项卡的制作方法
Jan 23 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 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
自己做矿石收音机
2021/03/02 无线电
php4的session功能评述(三)
2006/10/09 PHP
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
php源码的使用方法讲解
2019/09/26 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python实现八皇后问题示例代码
2018/12/09 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
详解Django admin高级用法
2019/11/06 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
遗嘱继承公证书
2014/04/09 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
思想品德评语大全
2014/12/31 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL