使用jQuery在翻滚时更改图像源

我有一些图片和它们的滚动图片。使用jQuery,我想在onmousemove/onmouseout事件发生时显示/隐藏滚动图像。我所有的图像名称都遵循相同的模式,如下所示:

原始图像:Image.gif

滚动图像:Imageover.gif

我想插入并删除”按钮;超过分别在onmouseover和onmouseout事件中的图像源部分

我如何使用jQuery来实现它

要设置就绪:

$(函数(){
$(“img”)
.mouseover(函数(){
var src=$(this.attr(“src”).match(/[^\.]+/)+“over.gif”;
$(this.attr(“src”,src);
})
.mouseout(函数(){
var src=$(this.attr(“src”).replace(“over.gif”,“.gif”);
$(this.attr(“src”,src);
});
});

对于使用url图像源的用户:

$(函数(){
$(“img”)
.mouseover(函数(){
var src=$(this.attr(“src”);
var regex=/_normal.svg/gi;
src=this.src.replace(regex,“\u rollover.svg”);
$(this.attr(“src”,src);
})
.mouseout(函数(){
var src=$(this.attr(“src”);
var regex=/_rollover.svg/gi;
src=this.src.replace(regex,“u normal.svg”);
$(this.attr(“src”,src);
});
});

发表评论