Question

我有一个图片较大的网页，下面有一些缩略图。我从stackoverflow获得了一些代码，让你的缩略图在主图像上方悬停。

var largeImage = $("#largeImage");
$(".image-list img").hover(function(){
   var src = $(this).attr("src");
    $("#largeImage").attr("src",src);
});

然而，我见过的例子使用了缩略图的来源。由于我不想压缩缩略图，我有一些小的例子。例如./images/car-108x72.png

我也有更大的版本，例如./images/car-468x311.png

有没有办法在javapart中更改源（src）以使用更大的图像？有多个缩略图和更大的版本，因此它需要是动态的而不是静态的URL。

Answer 1

编辑：实际上，只要您的网页是HTML5，@ NickR的解决方案就比我的好。使用img标记的data-large属性。

例如：<img src="thumbnail.png" data-large="some-large-image-here.png">

然后使用：

访问大图像

 var largeImage = $("#largeImage");
 $(".image-list img").hover(function(){
 var src = $(this).attr("data-large");
 $("#largeImage").attr("src",src);

原始答案：

将您的代码更改为：

 var largeImage = $("#largeImage");
 $(".image-list img").hover(function(){
 var src = $(this).attr("src");
 src = src.replace("108x72","468x311");
 $("#largeImage").attr("src",src);

Answer 2

添加您的拇指图片标记附加标记，就像large_img_src

一样

<img src="img1.png" larg_img_src="large_img1.png">
<img src="img2.png" larg_img_src="large_img2.png">
<img src="img3.png" larg_img_src="large_img3.png">

现在应用像这样的jquery

var largeImage = $("#largeImage");
$(".image-list img").hover(function(){
   var src = $(this).attr("larg_img_src");
    $("#largeImage").attr("src",src);
});

javascript thumb image hover更改为具有不同来源的更大图像

2 个答案: