通过缩略图悬停图像交换？

Posted 2023-05-08

【中文标题】通过缩略图悬停图像交换？

【英文标题】：Image Swap by thumbnail hover?

【发布时间】：2011-05-11 23:11:27

【问题描述】：

http://visually-minded.com/portfolio-project.php

在上面的链接中，当用户将鼠标悬停在任何缩略图上时，主图像将被交换。任何人都可以为我指出正确的方向以获取此教程吗？

【参考方案1】：

带有html：

<img id="target" src="full_img_name1"/>
<a href="full_img_name1"><img src="thumb1"/></a>
<a href="full_img_name2"><img src="thumb2"/></a>
<a href="full_img_name3"><img src="thumb3"/></a>

还有一个脚本：

$("a img").hover(function()
  var img = $(this).closest('a').attr('href');
  $('#target').show().attr('src',img);
,function()
  $('#target').hide().attr('src','');
);

【讨论】：

关于一个相关话题...arstechnica.com/tech-policy/news/2010/10/…

【参考方案2】：

这里与点击一起使用。

http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

刚刚看过代码。但应该是你正在搜索的东西

【讨论】：

这个例子很完美。非常感谢 SCBoy

【参考方案3】：

如果您对 javascript 不满意，这里有一个非常简单的纯 CSS 实现：

http://www.cssplay.co.uk/menu/gallery4.html

【参考方案4】：

$(element).hover(
    function ()  $(this).data('original', $(this).attr('src')).attr('src', newsrc),
    function ()  $(this).attr('src', $(this).data('original')
);

我不知道您如何定义图像的新来源，但这几乎是可行的方法。此外，您可能希望在每个图像上使用 each() 并在内部定义“newsrc”。

【参考方案5】：

在 jQuery 中你可以这样做：

$(function() 
$('#myImage-hover').hover(function() 
    $('#myImage').attr("src","path-to-file/img.png");, function() 
    $('#myImage').attr("src","path-to-file/img_2.png");

    );
 ); 

例如here in jsFiddle。

【讨论】：

你能扩展一下吗？我有类似的问题，但拇指和相应的图像不同