用javascript / jQuery更好地实现褪色图像交换
这不是一个具体的问题或错误，而是一个更多的实现问题。
首先，我想说，我已经经历了许多褪色的图像教程，我对不同的类型有一个基本的理解。我希望这不会和其他数百个关于褪色图像的问题一起抛出。
这基本上就是我想要的:使用javascript (最好是jQuery )在悬停时将图像淡入另一个图像。我会创建两个图像-一个名为image.jpg，另一个名为image_o.jpg。它们将驻留在同一个文件夹中。
以下是html标记的样子：
<img class="imghover" src="image.jpg" />javascript将要求我在我想要悬停的所有图像上都有imghover类。脚本将检测到名为imghover_o.jpg的第二个图像，并将其用于悬停淡出转换中的第二个图像。
转换将不需要CSS或background-image。
我将有几个这样的图像在一个网格，他们都需要有褪色过渡。因此，您可以看到，我不想为每个图像创建一个新的CSS类，也不希望有额外的脚本和html标记，这会变得非常麻烦。
以上所有这些都是通过这个丹尼尔·诺兰剧本减去淡入过渡来实现的。脚本只是在没有淡出的情况下交换图像，但是它是用最少的代码完美地设置的。
所以你可以说，我只是想添加一个淡出过渡到丹尼尔诺兰滚动脚本。是否可以使用jQuery重做他的脚本？
这有可能(用jQuery)吗？
我会在网站上使用它
回答 3
Stack Overflow用户
发布于 2011-09-06 20:06:01
您可以获取图像的src属性，并在悬停时使用.replace()替换url！
工作演示
$('.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.jpg替换为imageRed_o.jpg：
var hover = std.replace(".jpg", "_o.jpg"); - ，而不是将第一个映像包装到元素
$(this).wrap('<div />')中。 - 所以现在我们可以克隆这个图像，给它一个不同的
src，并把它放在第一个.clone().insertAfter(this).attr('src', hover)下面。 - 我们必须从第二个图像中删除'.fadein‘类(只有第一个图像才有该类！)
.removeClass('fadein')！ - 在克隆了该图像之后，我们在第二个中设置了一个图像，方法是将css的位置设为
.siblings().css({position:'absolute'});： - 在鼠标进入/离开时，我们只需播放第一个图像的可见性即可。
Stack Overflow用户
发布于 2011-09-06 20:32:41
下面是一个很好的模式：
<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">联署材料：
$('body').find('*[hoverImg]').each(function(index){
$this = $(this)
$this.wrap('<div>')
$this.parent().css('width',$this.width())
$this.parent().css('height',$this.width())
$this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")")
$this.hover(function() {
$(this).stop()
$(this).fadeTo('',.01)
},function() {
$(this).stop()
$(this).fadeTo('',1)
})
});Stack Overflow用户
发布于 2011-09-06 20:09:09
试着像这样简单地做：
$('#img').hover(
function() {
$(this).stop().fadeIn(...).attr('src', 'image_o').fadeOut(...)
},
function() {
$(this).stop().fadeIn(...).attr('src', 'image').fadeOut(...)
});https://stackoverflow.com/questions/7325445
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号