Question

我正在尝试创建一个功能，允许图像在页面内滚动时淡入和淡出。与My previous similar question类似，而不是让脚本找到滚动句柄的位置，我只想让滚动条循环遍历对象中的图像，并将它们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...来选择＆＃34; next＆＃34;键，并使用它来检索图像。

最后，您希望在.css()的回调中拨打.fadeIn()和.fadeOut()，否则您会在{{{{}}之前看到背景图片更改1}}动画结束。

为了简化以下示例中的内容，我选择fadeOut() button来触发onclick回调。

nextImage

＆＃13;

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');
   }
 });
});

＆＃13;

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');
   }
 });
});

＆＃13;

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

＆＃13;

滚动时淡出一个背景图像并在另一个图像中淡入淡出

1 个答案: