1

我正在做一个网络项目，我想制作一排 3x2 的瓷砖，当你将鼠标悬停在它们上面时，瓷砖会淡出并淡入包含图像的新瓷砖。

我有多个使用 DIV 类的图像瓷砖.previewBox。当您将鼠标悬停在这些图像上时，我使用 JQuery 淡出图像并使用新图像淡入（使用名为 waitForImages 的 JQuery 插件，该插件专门用于在 JavaScript 中加载图像）问题是我希望每个图块都以不同的图像集。我想将所有第一组图像（预览图像）放在一个数组中，将第二组图像（翻转图像）放在一个不同的数组中，当您将鼠标悬停在它想要设置翻转图像时调用 flipArray.indexOf(this) 但由于 JavaScript 正在检测 div 我不确定这是否会起作用，因为“this”不是指数组中的图像。

我仍然在学习 javascript，我不确定如何检测您悬停在哪个图像上并获取它的索引号以将其切换为另一张图片。

我有褪色图像的脚本，但现在我有硬编码的图像位置。

$(document).ready(function() {
    //Document is ready to load
    var hov = false;
    //Since there is more then one tile using the .previewBox I use the .each command
    $('.previewBox').each(function() {
        var previewBox = $(this); // Won't create as many objects this way.
        previewBox.mouseenter(function() // On mouse enter
        {
            if (hov === false) //Keeps animation from repeating
            {
                hov = true; // Sets boolean for mouse leave
                previewBox.fadeOut(function() //Fades out
                {
                    previewBox.waitForImages(function() //Loads images
                    {
                        previewBox.stop().fadeIn(); //Fades in
                    });
                    previewBox.attr("src", "Images/Portfolio/Art_Bike_Flip.png"); //New image location. 
                });
            };
        });
    });
    $('.previewBox').each(function() {
        var previewBox = $(this);
        previewBox.mouseleave(function() {
            if (hov === true) {
                hov = false;
                previewBox.fadeOut(function() {
                    previewBox.waitForImages(function() {
                        previewBox.stop().fadeIn();
                    });
                    previewBox.attr("src", "Images/Portfolio/Art_Bike_Preview.png");
                });
            };
        });
    });
});
4

0 回答 0