Question

默认情况下，我的网页会加载包含/thumb-min/文件夹中图片的类别，例如95-IMG_6509.JPG，所以它是：

/thumb-min/95-IMG_6509.JPG

在它加载的详细信息页面中：

/thumb-medium/95-IMG_6509.JPG

所以在翻转时，我想将 /thumb-min/95-IMG_6509.JPG 更改为 /thumb-medium/95-IMG_6509.JPG

我想制作hover ZOOM IN effect，但不知道如何将其应用到我的网站。 THX

Answer 1

试试这个，我提供了逻辑，正如练习一样，它可以帮助你，在悬停时你可以将图像源替换为thumb-medium并将其更新到你的图像源中

var str = "/thumb-min/95-IMG_6509.JPG";
var res = str.replace("thumb-min","thumb-medium"); 
$('#your image Id').attr("src", res);

Answer 2

做这样的事情：

<img src="/thumb-min/95-IMG_6509.JPG"
     data-src="/thumb-medium/95-IMG_6509.JPG" class="rollover" />

在JavaScript中，请使用：

$(document).ready(function(){
  $(".rollover").hover(function(){
    rollover = $(this).attr("src");
    $(this).attr("src", (this).data("src"));
    $(this).data("src", rollover);
  }, function(){
    rollover = $(this).data("src");
    $(this).data("src", $(this).attr("src"));
    $(this).attr("src", rollover);
  });
});

或者更简单的方法：

$(document).ready(function(){
  $(".rollover").hover(function(){
    $(this).attr("src", $(this).attr("src").replace("thumb-min","thumb-medium"));
  }, function(){
    $(this).attr("src", $(this).attr("src").replace("thumb-medium","thumb-min"));
  });
});

对于放大效果，有很多jQuery插件。请参阅最适合您的imgPreview！

如何在翻转时替换文件夹名称？

2 个答案: