javascript - jQuery "Meet the team"效果

Question

我正在尝试为 this block 创建 jQuery 效果。这个想法是，当鼠标悬停在其他照片上时，其他照片会“看着”所选的照片。这是 html 代码。

<ul class="team">
    <li><img src="pics/team/t-0001.jpg" alt=""/></li>
    <li><img src="pics/team/t-0002.jpg" alt=""/></li>
    <li><img src="pics/team/t-0003.jpg" alt=""/></li>
    ...
</ul>

理论上我明白，当鼠标悬停在这些 li 元素之一上时，我必须更改其他元素中图像的 src 值。并且需要几个数组来存储这些路径。

但在实践中我遇到了很大的问题。

我首先应该做什么？可能有一些示例或插件吗？

我将不胜感激任何帮助。

<小时/>

谢谢你的帮助!抱歉，没能早点回答，因为还有很多工作要做。

我已经找到解决办法了。它非常简单，不太灵活，但它有效。我正在使用背景图像。

这里是示例 http://jsfiddle.net/KSYUC/4/

Answer 1

一种可以简化问题的方法，即不用每个人 9 张图像，而是实际使用每个人一张合成图像，并具有所有可能性。也许在一张图像中是这样的(箭头显示了人应该看的方向):

这使您只需通过 CSS 更改图像的背景位置(使用由图像大小确定的规则间隔)即可改变方向。它还具有一个好处，即面部的所有可能性都会同时加载，而不是在面部发生变化时加载(这可能会导致图像闪烁或需要预加载)。

然后，您必须计算每张脸使用哪个图像，具体取决于其与所选脸的相对位置。这是坐标之间的算术比较问题。

因此，如果您针对选定的面迭代所有面，那么如果当前的 Y 高于选定的 Y，那么它将成为前三个“子图像”之一，然后您将 X 与看看它是小于、等于还是大于，以确定三者中的哪一个。这同样适用于所有三行可能的面。最终归结为比较 Y 和 X 的小于、等于或大于。这样您就可以计算背景位置中 X 和 Y 的偏移量。