在滚动位置更改图像

Question

我想在某个滚动位置上更改图像.例如:

滚动100px显示img1.jpg

滚动200px显示img2.jpg

滚动300px显示img3.jpg

我在这里找到了一个我的意思的例子.

有任何想法吗？

Answer 1

您可以使用该onScroll事件来收听滚动,检查滚动条的位置并使图像更改或您想要的任何内容.您可以在此处阅读有关onScroll事件的更多信息.基本代码将是这样的:

var onScrollHandler = function() {
  var newImageUrl = yourImageElement.src;
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 100) {
     newImageUrl = "img1.jpg"
  }
  if (scrollTop > 200) {
     newImageUrl = "img2.jpg"
  }
  if (scrollTop > 300) {
     newImageUrl = "img3.jpg"
  }
  yourImageElement.src = newImageUrl;
};
object.addEventListener ("scroll", onScrollHandler);

当然yourImageElement应该替换为您想要更改的图像元素.

如果你有jQuery availble,你可以使用.scroll()方法而不是事件监听器,并.scrollTop()获得滚动条位置.

此外,您可能希望查看一些滚动/ paralex库,如skrollr.