移动端横屏的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代码是实现移动端横屏的核心代码，代码简单易懂，所有没给大家附太多的注释，如果大家哪里有不明白的地方欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对小牛知识库网站的支持！
-
移动端HTML如何做强制横屏效果？就是页面一打开就是横屏的，现在页面横屏了，可是里面的子元素不横屏，我就奇怪了，我看别人写的都可以我跟写的就不行，我还对比了样式，也没看出来哪里不一样 有谁知道是怎么回事吗？
-
本文向大家介绍javascript检测移动设备横竖屏，包括了javascript检测移动设备横竖屏的使用技巧和注意事项，需要的朋友参考一下 如何判断 移动设备提供了两个对象，一个属性，一个事件： （1）window.orientation 属于window对象上一个属性；共有三个值 ：0为竖屏模式（portrait）,90为向左反转变为横屏模式（landscape），-90为向右反转变为横屏模
-
本文向大家介绍js滚动条平滑移动示例代码，包括了js滚动条平滑移动示例代码的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js滚动条平滑移动相关代码，供大家参考，具体内容如下 html页 js页 css页 以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍原生js实现移动端瀑布流式代码示例，包括了原生js实现移动端瀑布流式代码示例的使用技巧和注意事项，需要的朋友参考一下 瀑布流布局已成为当今非常普遍的图片展示方式，无论是PC还是手机等移动设备上。最近使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是zepto.js 。当然也可以和jQuery 通用。 代码如下： 以上所述就是本文给大家分享的全部内容了，希望
-
本文向大家介绍JS div匀速移动动画与变速移动动画代码实例，包括了JS div匀速移动动画与变速移动动画代码实例的使用技巧和注意事项，需要的朋友参考一下 1.匀速移动代码 2.变速移动代码 common.js 以上所述是小编给大家介绍的JS div匀速移动动画与变速移动动画详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
-
本文向大家介绍JS实现双击屏幕滚动效果代码，包括了JS实现双击屏幕滚动效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下： 这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js