改变方向改变图像

Posted 2023-03-15

【中文标题】改变方向改变图像

【英文标题】：Changing Image on Orientation Change

【发布时间】：2012-08-01 13:40:10

【问题描述】：

所以我使用 phoneGap/Cordova 和 Jquery mobile 为 iPad 设计了这个应用程序。

在研究了如何在方向更改时更改图像并浏览 Stack Overflow 的史诗资源之后。我实现了这段代码。

// The event for orientation change
var onChanged = function () 

    // The orientation
    var orientation = window.orientation,
        // If landscape, then use "land" otherwise use "port"
        image = orientation == 90 || orientation == -90 ? "landscape" : "portrait";

    // Insert the image
    $('#introimg').html('<img src="images/appimages/' + image + '-intro-page.png">');

;

// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);

我正在尝试更改介绍页面的图像。我使用的html是：

<div data-role="page" id="intro">

        <div data-role="content" class="mycontent" data-theme="a">
            <div id="introimg">
                <img src="images/appimages/portrait-intro-page.png"    id="imglayer1" />
                <br />
                <p id="imglayer2"><a href="#help" data-role="button" data-inline="true" data-theme="a">Start designing</a></p>
            </div>

        </div>  
    </div>

谁能说我做错了什么，可能是愚蠢的，但我看不到。任何帮助将不胜感激。

【问题讨论】：

加括号有帮助吗：image = (orientation == 90 || orientation == -90) ? "landscape" : "portrait";

不似乎没有任何区别。 ://

【参考方案1】：

您可以为此使用类：

var onChanged = function () 

    // The orientation
   var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";

   // Insert the image class
  $("introimg").removeClass("portrait").removeClass("landscape").addClass(orientation);

;