我正在尝试实现一个脚本,该脚本将在将成为图像或文本的按钮上的单击事件时淡入一组新图像,替换旧集。要了解我想要复制的内容(不幸的是,在 flash 中),请参阅http://seanjustice.com/的“教学”部分。
我从 stackoverflow 上的另一个主题中找到了这个jfiddle,但我不确定如何使用按钮和鼠标单击来替换图像集,而不是在悬停时使用简单的淡入淡出效果。
那么任何人都可以帮助我提出建议吗?如何使用会触发图像交换的按钮?
我正在尝试实现一个脚本,该脚本将在将成为图像或文本的按钮上的单击事件时淡入一组新图像,替换旧集。要了解我想要复制的内容(不幸的是,在 flash 中),请参阅http://seanjustice.com/的“教学”部分。
我从 stackoverflow 上的另一个主题中找到了这个jfiddle,但我不确定如何使用按钮和鼠标单击来替换图像集,而不是在悬停时使用简单的淡入淡出效果。
那么任何人都可以帮助我提出建议吗?如何使用会触发图像交换的按钮?
使用您提供的 jsfiddle,您可以执行以下操作:
$('.fadein').each(function() {
var std = $(this).attr("src");
var hover = std.replace("text=1", "text=2");
$(this).wrap('<div />').clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
position:'absolute'
});
$('#swapper').click(function() {
$('.fadein').stop().fadeTo(600, 0);
});
});
对不起,这是标记:
<img class="fadein" src="http://dummyimage.com/180x100/000/fff&text=1" alt="" />
<img class="fadein" src="http://dummyimage.com/180x100/cf5/fff&text=1" alt="" />
<img class="fadein" src="http://dummyimage.com/180x100/f0f/fff&text=1" alt="" />
<a href="#" id="swapper">Click Here</a>