滚动时更改固定图像

Change fixed image when scrolling

本文关键字：图像 滚动      更新时间：2023-09-26

我试图有一个固定的图像变化，当我滚动超过3个特定的行。图片是一个手机的界面，应该与正常的文本匹配，因为我滚动新的文本被看到，手机的界面应该相应地改变!

我设法修改了一个JSFiddle，我在另一个线程中发现了一些文本Div的技巧，但我不能在我的网站上实现它，其中有url作为源的图像。

这是JSFiddle: http://jsfiddle.net/dB7eF/25/

下面是在JSFiddle中实现这一功能的JS:

$("#image1").fadeIn(1000);
$(document).scroll(function() {
  var pos = $(document).scrollTop();
  if (pos < 200) {
    hideAll("image1");
    $("#image1").fadeIn(1000);
  }
  if (pos > 200 && pos < 600) {
    hideAll("image2");
    $("#image2").fadeIn(1000);
  }
    if (pos > 600 && pos < 1000) {
    hideAll("image3");
    $("#image3").fadeIn(1000);
  }
});
function hideAll(exceptMe) {
  $(".image").each(function(i) {
    if ($(this).attr("id") == exceptMe) return;
    $(this).fadeOut();
  });
}

该网站是用Visual Composer构建的，所以我希望图像的来源是url而不是像JSFiddle示例中的id !

我更新了js的fiddle和添加图像标签与源，添加一个图像标签在div标签

<div id="c3" class="left"><img src="https://dummyimage.com/300x200/000/fff" style="width:100px"/></div>
http://jsfiddle.net/dB7eF/26/

这是你想要的吗?

相关文章：