根据调整大小的方向显示不同的图像

Question

我有两张图片。我试图在浏览器向左调整大小时显示一个，而在向右调整大小时显示另一个。

    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。

任何帮助将不胜感激

Answer 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;