Question

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

在上述链接上，当用户将鼠标悬停在任何缩略图上时，主图像将被交换。有人能够指出我正确的方向为这个教程吗？

Answer 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','');
});

Answer 2

此处与点击一起使用。

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

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

Answer 3

如果你不熟悉javascript，那么这是一个简单的纯CSS实现：

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

Answer 4

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

我不知道你如何定义图像的新来源，但这几乎是要走的路。另外，您可能希望在每个图像上使用each（）并在内部定义'newsrc'。

Answer 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。

图像交换缩略图悬停？

5 个答案: