0

我正在尝试为这个块创建一个 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/

4

3 回答 3

3

一种简化问题的方法是，通过每个人不包含 9 张图像，实际使用每个人一张合成图像，并具有所有可能性。在一张图片中可能是这样的（箭头表示人应该看的方向）：

面方向

这使您可以通过 CSS 更改图像的背景位置（使用由图像大小确定的常规间隔）来改变方向。它还有一个好处是同时加载面部的所有可能性，而不是在面部变化时（这可能导致图像闪烁或需要预加载）。

然后，您必须根据其与所选人脸的相对位置来计算每个人脸要使用的图像。这是坐标之间的算术比较问题。

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

于 2012-08-22T23:29:17.697 回答
0 
$('img.smart').hover(function () {
    $(this).css('background-position':'-150px 0');
  },
  function () {
    $(this).css('background-position':'0 0');
  },
);

放置一张带有显示块的“双”图像，普通图像的宽度和高度，并将css位置更改为负值并返回。注意：我为每个图像添加了 class="smart" 以便于 jQuery 选择

于 2012-08-22T22:51:14.707 回答
0

好吧，我建议您使用 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/

于 2012-08-22T22:51:57.660 回答