我正在为我正在构建的网站使用 Jquery 中的图像切换功能。有大量的项目,所以我对这些图像进行了大量压缩。然而,其中一些看起来不像 .gif 那样好看,只有制作 .jpg 才有意义。
我的问题是,此代码仅将一个图像交换为另一个名称不同但前缀相似的图像。有没有办法只交换文件的名称,这样如果我有 .gif 或 .jpg,那没关系,因为它只是将名称从 _static 交换为 _rollover?
这是我正在使用的代码:
//Image Switch
$(document).ready(function(){
$(".projectThumb img").hover(
function(){
var iconName = $(this).attr("src");
var origin = iconName.split("_static.")[0];
$(this).attr({src: "" + origin + "_rollover.gif"});
},
function(){
var iconName = $(this).attr("src");
var origin = iconName.split("_rollover.")[0];
$(this).attr({src: "" + origin + "_static.gif"});
});
});
以及图像切换的 HTML
<div class="projectThumb">
<img src="/img/mr_button_static.gif" class="button" name="mr">
<p class="title">Title – Poster</p>
</div>
要切换的图片名为/img/mr_button_rollover.jpg
谢谢!
最佳答案
只需使用字符串替换即可在图像名称中的静态和翻转之间切换。
//Image Switch
$(document).ready(function(){
$(".projectThumb img").hover(
function(){
var iconName = $(this).attr("src");
var rollover = iconName.replace( /static/, 'rollover' );
$(this).attr({ src: rollover });
},
function(){
var iconName = $(this).attr("src");
var static = iconName.replace( /rollover/, 'static' );
$(this).attr({ src: static });
});
});
如果图像前缀中存在静态/翻转的可能性,只需在搜索和替换字符串中包含下划线并匹配/替换文件扩展名之前的点即可。
关于Jquery 图像切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1385827/