鼠标移动时的缩略图图像交换

Question

我希望有一个画廊网站，有多个缩略图，包括3个图像，只要我鼠标移动到每个图像上就会旋转。

我在@matthias_h的另一个线程中发现了这个惊人的响应性fiddle，当鼠标移动到缩略图框上时，通过多个缩略图图像。

他的小提琴:http://jsfiddle.net/matthias_h/2f2tth47/

HTML

<article>
<figure data-image-list="http://dummyimage.com/200x200/000000/cccccc.png&text=img1,http://dummyimage.com/200x200/dedede/cccccc.png&text=img2,http://dummyimage.com/200x200/b31031/cccccc.png&text=img3">
<img class="imageHolder" data-src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" src="http://dummyimage.com/200x200/cdcdcd/dddddd.png&text=+" />
</figure>

Javascript

$(".imageHolder").mousemove(function (event) {
var xPos = event.pageX,
imgPos = $(".imageHolder").offset().left,
imgWidth = $(".imageHolder").width();
console.log("xPos: ", xPos, ", imgPos: ", imgPos, ", imgWidth: ", imgWidth);
var change1 = imgPos,
change2 = imgPos + imgWidth / 3,
change3 = imgPos + 2 * imgWidth / 3;
console.log("change1: ", change1, "change2: ", change2, "change3: ", change3);
$images = $("figure").data("imageList");
var array = $images.split(',');
if (xPos > change1) {
$("img").attr("src", array[0]);
}
if (xPos > change2) {
$("img").attr("src", array[1]);
}
if (xPos > change3) {
$("img").attr("src", array[2]);
}});$("img").mouseout(function (){$("img").attr("src", $("img").data("src"));});

不幸的是，这里有两个问题。

1. 当复制它时，移动它们中的任何一个也会切换
2. 它需要单个图像而不是通过css bg位置，这是效率较低的，因为我个人使用图像精灵为我所有的工作。

我对html/css有很好的经验，但对javascript没有经验。我很想知道如何解决这两个问题。主要是第一个使画廊与多个图像工作在第一时间。

提前感谢!

Answer 1

现在您复制了元素，它针对的是一个集合，而不仅仅是一个元素。

一般来说，jQuery方法的setter适用于所有匹配的元素，getter返回第一个匹配元素的值。

问题1:
用
$(this)代替$("img")
$(this)代替$(".imageHolder")
$(this).parent("figure")代替$("figure")

问题#2:
你将不得不使用.css()来改变背景位置，而不是改变href。
这就像$(this).css({background-position: newPosition})，其中newPosition必须被定义…

CodePen