2

私は2つの画像を持っています。ブラウザのサイズが左に変更されたときに 1 つを表示し、右にサイズ変更されたときにもう 1 つを表示しようとしています。

    function adjustDirection() {
        var last_pos_x = window.screenX;

        if ( last_pos_x < window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoRight.png')";
        } else if (last_pos_x > window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoLeft.png')";
        }
    }
    window.onresize = adjustDirection;

ただし、関数の外部で宣言されている場合にのみ関数が機能し始めるようです。これは、ロードからlast_pos_xのみ保存されるため、明らかに間違っています。window.screenX

どんな助けでも大歓迎です

4

1 に答える 1

1

最も簡単な解決策は、jQuery を使用することです。posX 値を DOM に保存して取得する

HTML

<div id="aaa" data-posx="0"></div>

Javascript

function adjustDirection() {
        var last_pos_x = $("#id").attr("data-posx");
        $("#id").attr("data-posx",window.screenX);
        if ( last_pos_x < window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoRight.png')";
        } else if (last_pos_x > window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoLeft.png')";
        }
    }
    window.onresize = adjustDirection;

js だけの新しいコード:

function adjustDirection() {
    var last_pos_x = window.screenX;
    return function() {
        if (last_pos_x < window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoRight.png')";
        } else if (last_pos_x > window.screenX) {
            document.getElementById("logo").style.backgroundImage = "url('logoLeft.png')";
        }
        last_pos_x = window.screenX;
    }
};
var z = adjustDirection();
window.onresize = z;
于 2015-02-20T05:44:23.773 に答える