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;

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

1 个答案: