使用 javascript/jQuery 更好地实现褪色图像交换

2022-01-22 00:00:00 hover jquery javascript fade rollover

这不是一个具体的问题或错误，而是一个实施问题.

This is less of a specific problem or error but more of a implementation question.

首先我想说的是，我已经阅读了很多褪色图像教程，并且对不同种类的图像有了基本的了解.我希望这不会与其他数百个有关褪色图像的问题一起被抛出.

First of I'd like to say that I've been through a lot of fading image tutorials and I have a basic understanding of the different kinds. I hope this doesn't get thrown out along with the other hundreds of questions about fading images.

这基本上是我想要的:使用 javascript，最好是 jQuery，一个图像在悬停时淡入另一个图像.我会创建两张图片——一张名为 image.jpg，另一张名为 image_o.jpg.它们将驻留在同一个文件夹中.

This is basically what I would like: An image fading into another image on hover using javascript and preferably jQuery. I would create two images—one named image.jpg and another named image_o.jpg. They would reside in the same folder.

这是 html 标记的样子:

Here's what the html markup would look like:

<img class="imghover" src="image.jpg" />

javascript 将要求我在我想要悬停的所有图像上都有 imghover 类.该脚本将检测名为 imghover_o.jpg 的第二张图像，并将其用于悬停渐变过渡中的第二张图像.

The javascript would require me to have the imghover class on all the images that I want to hover. The script would detect the second image named imghover_o.jpg and use it for the second image in the hover fade transition.

过渡不需要 CSS 或 background-image.

There would be no required CSS or background-image for the transition.

我将在一个网格中有几个这样的图像，它们都需要有淡入淡出过渡.因此，您可以看到我不想为每个图像创建一个新的 CSS 类，或者有额外的脚本和 html 标记会变得很麻烦.

I will have several of these images in a grid and they will all need to have the fade transition. So, you can see that I do not want to make a new CSS class for every image, or have extra script and html markup that will get cumbersome.

以上所有内容都是通过这个 Daniel Nolan 脚本 减去淡入淡出过渡来实现的.该脚本只是在不褪色的情况下交换图像，但它使用最少的代码完美设置.

All of the above is achieved with this Daniel Nolan script minus the fade transition. The script just swaps the image with no fade, but it is set up perfectly with minimal code.

所以你可以说我只想为 Daniel Nolan 翻转脚本添加一个淡入淡出过渡.是否可以使用 jQuery 重新制作他的脚本?

So you could say that I just want add a fade transition to the Daniel Nolan rollover script. Is is possible to remake his script using jQuery?

这可能吗(使用 jQuery)?

Is this possible (with jQuery)?

我将使用它的网站

推荐答案

获取图片的src属性，使用.replace()替换url悬停！

You can get the src attribute of an image and use .replace() to replace the url on hover!

$('.fadein').each(function() {

    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg"); 
    $(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

或者喜欢:

$('.fadein').each(function() {  
    var std = $(this).attr("src");
    var hover = std.replace(".jpg", "_o.jpg");
    $(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
        position:'absolute'
    });
    $(this).mouseenter(function() {
        $(this).stop().fadeTo(600, 0);
    }).mouseleave(function() {
        $(this).stop().fadeTo(600, 1);
    });
});

脚本的作用:

  • var std = $(this).attr("src"); 获取SRC属性
  • 用 imageRed_o.jpg 替换 imageRed.jpg : var hover = std.replace(".jpg", "_o.jpg");
  • 我们必须将第一张图片包装到一个元素中 $(this).wrap('<div/>')
  • 现在我们可以克隆该图像并给它一个不同的 src 并将其放置在第一个 .clone().insertAfter(this).attr('src',悬停)
  • 我们必须从第二张图片中删除.fadein"类(只有第一张图片会有该类！).removeClass('fadein')
  • 在克隆该图像后，我们通过为其分配一个 css 绝对位置来将图像设置为第二个:.siblings().css({position:'absolute'});
  • 与鼠标进入/离开相比，我们可以只玩第一张图片的可见性.
  • var std = $(this).attr("src"); grab the SRC attribute
  • replace the imageRed.jpg with imageRed_o.jpg : var hover = std.replace(".jpg", "_o.jpg");
  • Than we had to wrap the first image into an element $(this).wrap('<div />')
  • so that now we can clone that image and give it a different src and place it UNDERNEATH the first one .clone().insertAfter(this).attr('src', hover)
  • and we have to remove from the second image the class '.fadein' (only the first image will have that class!) .removeClass('fadein')
  • after we cloned that image we set the image one OVER the second by assigning it a css position absolute: .siblings().css({position:'absolute'});
  • Than on mouse enter/leave we can just play with the visibility of the first image.

相关文章