Question

我希望有一个动态且易于更新的投资组合。

在一个部分中会有一些小方形预览，并且悬停或点击这些预览将更新整个作业的大部分。

我非常了解：MM_swapImage()，但喜欢在jquery或ajax中执行此操作。

我该怎么做？

一些研究结果：http://code.google.com/p/jquery-swapimage/

-

<SCRIPT LANGUAGE="Javascript">
function swap(pic1, pic2)
{
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic1src = pic1.src;
var pic2src = pic2.src;
pic2.src = pic1src;
pic1.src = pic2src;
}
</SCRIPT>

Answer 1

这是我的代码（只是一个例子，它需要更改才能为你工作）

$('#imageswitch img').hover(
                function () {
                    var oldsource = $(this).attr('src');
                    var foldername = oldsource.substr(0, oldsource.lastIndexOf('/'));
                    var filename = oldsource.replace(foldername+'/','');
                    var newsource = foldername + '/' + 'hover_' + filename;
                    $(this).attr('src', newsource);
                    $(this).data('src', oldsource);                   
                }, 
                function () {
                    $(this).attr('src', $(this).data('src'));
                }
            );

为图像创建一个文件夹。小图像被称为： image_1.jpg

调用较大的图像 hover_image_1.jpg

（注意文件名前面的'hover_'）

将鼠标悬停在图像上并用新源（较大的图像）替换它的源，当您使用鼠标离开图像时，将恢复旧的源。

Answer 2

快速简便的解决方案是将较大的文件名存储在rel标记中，并使用它来交换页面上较大图像的来源。您可以通过淡入和淡出效果扩展它，但我只提供基数：

<img class="thumbnail" rel="image01-hr.jpg" src="image01-thumb.jpg" />
<img class="thumbnail" rel="image02-hr.jpg" src="image02-thumb.jpg" />
<img class="preview" src="image01-hr.jpg" />

$(".thumbnail").click(function(e){
  $(".preview").attr("src", $(this).attr("rel"));
});

投资组合出现

2 个答案: