Question

我有这样的编码，只需在点击链接时交换图像，我还会显示一些隐藏在图像上方的html内容。

 <script>
if($.browser.msie && parseInt($.browser.version) <= 6){
$('#contentone, #contenttwo, #contentthree, #contentfour, .linksBackground').hide();
}

$('#contentone, #contenttwo, #contentthree, #contentfour').hide();

$("#linkone").click(function() {
    $('#contenttwo, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeOne.jpg");
    $("#contentone").show("1500");
});
$("#linktwo").click(function() {
    $('#contentone, #contentthree, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeTwo.jpg");
    $("#contenttwo").show("1500");
});
$("#linkthree").click(function() {
    $('#contentone, #contenttwo, #contentfour').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeThree.jpg");
    $("#contentthree").show("1500");
});
$("#linkfour").click(function() {
    $('#contentone, #contenttwo, #contentthree').hide("1500");
    $("#imageone").attr("src","Resources/Images/TEMP-homeFour.jpg");
    $("#contentfour").show("1500");
});
</script>

当用户翻过链接时，是否有人知道如何进一步修改此图片以显示小缩略图？

我只是需要一个提示，因为我不知道该去哪里......我能用鼠标悬停实现吗？

Answer 1

jQuery有一个结合了鼠标悬停和鼠标悬停的悬停方法。您可以在链接中添加功能，以检索缩略图并在鼠标悬停时显示，然后在mouseout上隐藏缩略图。

$('yourlink').hover(function(){
    // display the thumbnail
}, function(){
    // hide the thumbnail
});

您需要在服务器上创建图像的缩略图（这可以自动完成，但您没有说明您使用的是哪种语言）。

或者，您可以只显示实际图像，但更改其尺寸以在显示时缩小它。请注意，如果这些图像很大，则加载时间会很长。旧版本的IE不能很好地调整图像大小。考虑使用此技巧来实现平滑调整大小。

Bicubic scaling in IE

链接鼠标悬停上的Jquery缩略图弹出窗口

1 个答案: