javascript - 滚动时淡出一张背景图像并淡入另一张背景图像

Question

我正在尝试创建一个功能，允许图像随着人们在页面内滚动而淡入和淡出。类似于 My previous similar question我不想让脚本找到滚动 handle 的位置，而是希望滚动条循环浏览对象中的图像，并让它们作为用户 fadeIn 和 fadeOut卷轴。我该如何实现这个目标？

var Plane_Images = {
    Skin: {
        name: "Skin Schematic",
        image: "images/Top-2.png",
        schematics: [["Nose Wheel Steering", "NST"], ["B", "B.1"], ["C", "C.1"], ["D", "D.1"]]
    },
    Structure: {
        name: "Structure Schematic",
        image: "images/ata21-2.png",
        schematics: [["Landing Gear Handle", "TRO"], ["F", "F.1"], ["G", "G.1"], ["H", "H.1"]]
    },
    Electrics: {
        name: "Electrics Schematic",
        image: "images/ata26-2.png",
        schematics: [["I", "I.1"], ["J", "J.1"], ["K", "K.1"], ["L", "L.1"]]
    },
    Fuel: {
        name: "Fuel Schematic",
        image: "images/Top-2.png",
        schematics: [["M", "M.1"], ["N", "N.1"], ["O", "O.1"], ["P", "P.1"]]
    }
}

到目前为止，我能够连续fadeIn 和fadeOut 一张图像，但不能对其他图像进行淡入淡出。这是我当前的脚本。

for(var images in Plane_Images){
    var image_src = Plane_Images[images].image;

    $("#scroll").on("slidestart", function(){
        $(this).on("mousemove touchmove", function(){
            $("#plane_image").css("background-image", "url(" +image_src +")").fadeOut("slow");
            $("#plane_image").css("background-image", "url(" +image_src +")").fadeIn("slow");
        })
    })
}

Answer 1

您在使用 for 循环时遇到问题。您正在做的是针对同一事件加载多个触发器。当事件被触发时，它们将在每个 mousemove 事件上依次运行。

为了循环浏览图像，您需要一个能够确定序列中下一个图像的函数，我将其称为 getNextPlaneImage()。该循环从 0 到 imagesList.length - 1，然后再次从 0 继续，其中 imagesList 是一个数组Plane_Images JS 对象的键。我们可以使用索引 i=0,1,2... 对此列表来选择“下一个”键，并使用它来检索图像。

最后，您需要在 .fadeOut() 的回调中调用 .css() 和 .fadeIn() ，否则您会在 fadeOut() 动画完成之前看到背景图像发生变化。

为了简化下面示例中的操作，我选择了一个带有 onclick 的 button 来触发 nextImage 回调。

var imagesList = [];

for(var images in Plane_Images){
    imagesList.push(images);
}

var i = 0;

function getNextPlaneImage() {
  var plane_image = Plane_Images[imagesList[i]].image;
  i = (i+1) % imagesList.length;
  return plane_image;
}


$('#scroll').on("nextImage", function(){
 $("#plane_image").fadeOut({
   duration: 'slow',
   complete: function () {
     $(this).css("background-image", "url(" +getNextPlaneImage() +")").fadeIn('slow');
   }
 });
});

var Plane_Images = {
    Skin: {
        name: "Skin Schematic",
        image: "http://placehold.it/200x300",
        schematics: [["Nose Wheel Steering", "NST"], ["B", "B.1"], ["C", "C.1"], ["D", "D.1"]]
    },
    Structure: {
        name: "Structure Schematic",
        image: "http://placehold.it/200x200",
        schematics: [["Landing Gear Handle", "TRO"], ["F", "F.1"], ["G", "G.1"], ["H", "H.1"]]
    },
    Electrics: {
        name: "Electrics Schematic",
        image: "http://placehold.it/200x100",
        schematics: [["I", "I.1"], ["J", "J.1"], ["K", "K.1"], ["L", "L.1"]]
    },
    Fuel: {
        name: "Fuel Schematic",
        image: "http://placehold.it/300x200",
        schematics: [["M", "M.1"], ["N", "N.1"], ["O", "O.1"], ["P", "P.1"]]
    }
};

var imagesList = [];

for(var images in Plane_Images){
    imagesList.push(images);
}

var i = 0;

function getNextPlaneImage() {
  var plane_image = Plane_Images[imagesList[i]].image;
  i = (i+1) % imagesList.length;
  return plane_image;
}


$('#scroll').on("nextImage", function(){
 $("#plane_image").fadeOut({
   duration: 'slow',
   complete: function () {
     $(this).css("background-image", "url(" +getNextPlaneImage() +")").fadeIn('slow');
   }
 });
});

#plane_image {
  width: 400px;
  height: 400px;
  background: black center no-repeat;
  border: 2px blue solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="scroll">
  <button onclick="$(this).trigger('nextImage');">
     Next
  </button>
</div>

<div id="plane_image"></div>