这不是一个具体的问题或错误,而是一个实现问题。
首先我想说的是,我已经通过了很多褪色的图像教程,我有不同种类的基本了解。我希望这不会和其他数百个关于图像褪色的问题一起被扔出去。
这基本上是我想要的:一个图像褪色到另一个图像在悬停使用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)? 我将在
您可以获得图像的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);
});
});
脚本的作用:
- 将imagered_ .jpg替换为imagered_ .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'});
- 然后在鼠标进入/离开,我们可以玩第一个图像的可见性。
var std = $(this).attr("src");
抓取SRC属性这里有一个很好的模式:
<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg">
JS:
$('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)
})
});
尽量做到简单一点:
$('#img').hover(
function() {
$(this).stop().fadeIn(...).attr('src', 'image_o').fadeOut(...)
},
function() {
$(this).stop().fadeIn(...).attr('src', 'image').fadeOut(...)
});