如何为“-hover”图像指定确切的文件路径目录(翻转效果)?现在,这仅适用于生活在子目录中的图像。
$(function(){
$('.box-img').append('<span></span>').hover(
function(){
$(this).find('img').stop().animate({opacity:0})
}, function(){
$(this).find('img').stop().animate({opacity:1})
}
).each(function(){
var src=new Array()
src=$(this).find('img').attr('src').split('.')
src=src[0]+'-hover.'+src[1]
$(this).find('>span').css({background:'url('+src+')'})
});
})
答案 0 :(得分:3)
我喜欢使用带有the background-position
css属性的sprite,但您可以使用RegExp
尝试此操作:
$(document).ready(function(){
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg);
}
);
});
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1-hover.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)-hover\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
答案 1 :(得分:1)
您可以使用basename
中的jquery.utils
从src
中提取基本名称。然后用“。”拆分basename,添加'-hover',然后重构路径。所以你不必担心名字,如“../../ css / images / image.png”。
或者您可以按“/”拆分,然后将数组的最后一个元素作为基本名称检索,将那个拆分为“。”。
var src=new Array()
// path/to/filename.jpg
src=$(this).find('img').attr('src').split('/')
var bname = src.pop() // bname is now filename.jpg, src is { path to }
var bco=new Array()
bco = bname.split('.') // bco is now { filename jpg }
ext = bco.pop() // ext is jpg, bco is { filename }
nam = bco.pop() // nam is filename, bco is { }
bco.push(nam + '-hover') // bco is { filename-hover }
bco.push(ext) // bco is { filename-hover jpg }
bname = bco.join('.') // bname is now filename-hover.jpg
src.push(bname)
srcString = src.join('/')
您还需要关心如何使用基本名称中的点命名文件(例如“ubuntu-12.02.jpg”),以及如何重新组合拆分数组。