2

我已经设置了一个页面，当用户使用鼠标或触控板滚动时，该页面将浏览一系列图像。我正在使用 jQuery 来测量与页面顶部的距离 - scrollTop() - 然后更改 DOM 中特定 id 的图像源。

这在 Firefox、Chrome、Safari、Opera、IE9 以及 iPad、iPhone 等上都可以完美运行。但是，它在 IE8 中不起作用。

这是 HTML：

<div id="flipping-container">
    <img id="flipping-id" class="flippingTarget" src="imageOne.png" alt="imageone" />
</div>

这是JS：

$(document).scroll(function() {
    var toTop = $(document).scrollTop();
    if (toTop <= 340) {
            $('.flippingTarget').attr('src','imageOne.png');
    }
    else if ((toTop <= 392) && (toTop > 341)){
            $('.flippingTarget').attr('src','imageTwo.png');
    }
    else if ((toTop <= 445) && (toTop >= 393)){
            $('.flippingTarget').attr('src','imageThree.png');
    }

// AND SO ON
// ENDING WITH...

    else {
            $('.flipping-target').attr('src','image1.png');
    };
});

"flipping-container" 的 div ID 被赋予一个 CSS 值 position:fixed; 所以它总是可见的。

我已经浏览了 StackOverflow 的帖子，但还没有找到可行的解决方案。scrollTop() 值被读取得非常好，因为我在按钮上有点击事件，这些按钮会将页面平滑地滚动到一个 div 和/或从顶部开始的多个像素。IE8 对此很好，所以这不是 html/body/document/window scrollTop() 问题。

我已经切换了 .addClass() 的 .attr() 值，看看它是否会被拾取。但它不在 IE8 中。所以它可能与 src 属性本身没有直接关系。我已经仔细检查了我的类名和目标，它们都很好（其他浏览器也证明了它们的性能）。

有什么线索吗？任何帮助将非常感激。

4

0 回答 0