jQuery“满足团队”的效果

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的偏移量。

Answer 2

$('img.smart').hover(function () {
    $(this).css('background-position':'-150px 0');
  },
  function () {
    $(this).css('background-position':'0 0');
  },
);

将一个“双”图像与正常图像的显示块，宽度和高度放在一起，并将css位置更改为负值和后退。 注意：我已经为每个图像添加了class =“smart”以便于jQuery选择

Answer 3

好吧，我建议你使用json而不是常规数组...为什么？那么你可以为给定的json对象分配一个用户名，然后包含该用户的所有图像以及其他用户的相同内容，然后在鼠标悬停时循环遍历该用户json对象。 说你有一个像这样的对象

 myvalues = [{"userone":['srcone','srctwo'],"usertwo":['srcone','srctwo']}]

你这样迭代它

for (var key in myvalues) {
    var obj = myvalues[key];
    for (var prop in obj) {
        alert("User:"+prop+" Valueone: "+obj[prop][0]+" Valuetwo:"+obj[prop][1]);
   }

}

http://jsfiddle.net/xRuBR/2/