0

基于此 URL 上的代码：http: //api.jquerymobile.com/orientationchange/

我尝试更改它，以便每个方向显示不同的图像。使用效果很好，$("#someID").html(< img src.../ >); 但由于某种原因，我无法使用 .addClass 使其正常工作

有人可以告诉我为什么以下内容似乎只产生空白屏幕吗？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>orientationchange demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style type="text/css">
    .landscape {
        background-image:url('images/landscape.jpg');
    }
    .portrait {
        background-image:url('images/portrait.jpg');
    }
</style>
</head>
<body>
<div id="orientation" class="landscape"></div>
<script>
// Bind an event to window.orientationchange that, when the device is turned,
// gets the orientation and displays it to on screen.
$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=="landscape") {
        //$("#orientation").removeClass("portrait");
        $("#orientation").addClass("landscape");
        return false;
    } else if (event.orientation=="portrait") {
        //$("#orientation").removeClass("landscape");
        $("#orientation").addClass("portrait");
        return false;
    }
});
// You can also manually force this event to fire.
$( window ).orientationchange();
</script>
</body>
</html>

好的，我现在可以使用维度定义并结合 addClass(class).removeClass(otherclass) 但有人可以告诉我如何将相同的更改应用于 body 而不是 div 吗？

4

1 回答 1

0

在 CSS 中，您必须包含高度和宽度。您可以使用 JS 执行此操作，但实际上需要在使用背景时指定高度和宽度。否则 div 不知道要占用多少空间。背景，顾名思义，就是在背景中。

 .landscape {
        background-image:url('http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg');
    background-color: blue;
        width: 1020px;
        height: 900px;
    }
    .portrait {
        background-image:url('http://blogs.smithsonianmag.com/aroundthemall/files/2009/01/npg_portraits_nicholson_jack_2002.jpg');
    background-color: black;
        width: 725px;
        height: 590px;
    }

另外，如果你想没有这两条线，你仍然需要摆脱旧的类。您可以使用 className 来执行此操作，如下所示：

$( window ).on( "orientationchange", function( event ) {
    if (event.orientation=="landscape") {
        //$("#orientation").removeClass("portrait");
        //$("#orientation").addClass("landscape");
        $("#orientation").get(0).className = "landscape");
        return false;
    } else if (event.orientation=="portrait") {
        //$("#orientation").removeClass("landscape");
        //$("#orientation").addClass("portrait");
        $("#orientation").get(0).className = "portrait";
        return false;
    }
});

这是我的 jsFiddle。它是在没有 .orientationchange() 的情况下完成的，但这个概念仍然有效。

于 2013-07-30T00:44:05.117 回答