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

【问题标题】：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。

【讨论】：

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