Question

我的最终目标是在窗口滚动到某个点时，将图像切换到不同的图像。我从JavaScript开始获取整个滚动位置并设置if / else语句。

<script type="text/JavaScript">
    function checkHeight() {
        currentScrollPos = window.scrollY;

        if (currentScrollPos < 325)
            document.getElementById('test1').innerHTML = "../wp-content/uploads/2017/04/LOGO-1.png";
        else if (currentScrollPos > 325)
            document.getElementById('test1').innerHTML = "../wp-content/uploads/2017/04/LOGO-1-alt.png";
    }
</script>

<p id="test1"></p>

所有这一切都完美无瑕。 <p id="test1"></p>的内部HTML内容显示正确的图像源，并在滚动时交换了所述源。完美。

最后，我将该图像源作为<img>的实际来源放置，这就是我撞墙的地方。我试图使用一个简单的PHP变量。

<?php
$src = <<<END
<p id="test1"></p>
END;
?>

这很有效。我echo $src可以像以前一样正确显示图像源。所以我继续，并将其放入以下代码中。

<img src='<?php echo $src; ?>' />

但没有。它似乎在某种程度上起作用，除了它在我加载页面时向我显示一个损坏的图像符号。为什么找不到我的图像文件？我错过了一些愚蠢的东西吗？

Answer 1

新的工作代码。抱歉浪费你所有的时间，成为一个完整的白痴。

<script type="text/JavaScript">

function checkHeight() {
    currentScrollPos = window.scrollY;

    if (currentScrollPos < 325)
        document.getElementById('image').src = "../wp-content/uploads/2017/04/LOGO-1.png";
    else if (currentScrollPos > 325)
        document.getElementById('image').src = "../wp-content/uploads/2017/04/LOGO-1-alt.png";
}
</script>

<body onload="checkHeight();" onScroll="checkHeight();"></body>
    <img id="image" width="200px" />

我的PHP变量源图像被破坏了

1 个答案: