网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料:

 

标题 移动端横屏的JS代码(beta)
内容
    这篇文章主要介绍了移动端横屏的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代码是实现移动端横屏的核心代码,代码简单易懂,所有没给大家附太多的注释
随便看

 

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/12 22:40:28