当鼠标穿过元素时jquery背景图像发生变化

Question

我的老板在网站上看到了这一点：http://event.photoswarm.com/

注意图像如何变化当你浏览专辑时。这样做的缺点是所有缩略图都必须在开始时下载，然后我想这一切都会起作用。

有没有一种方法可以让我在加载图像的同时获得类似的效果？

我猜的问题是：

1. 让图像加载得更干净
2. 让它们加载得更好，因为某些相册可能有 200 多张照片
3. 使用 jquery 插件 - 这个插件似乎是由 photo swarm 制作的，我猜他们不会如果我偷了它，我就太高兴了！

因此，如果有一种方法可以制作某些东西，或者有人知道免费插件，我可以下载，那就太好了。

Answer 1

如果您检查元素和资源，您会发现：

http://static.photoswarm.com/js /app_user.js

它使用 jQuery 和 Prototype.js

Answer 2

您可以将所有图像位置存储在一个数组中。然后，只有当您将鼠标悬停在图像上时，它才会加载图像。

var images=new Array("image1.jpg","image2.jpg","image3.jpg", 'image4.jpg");

Answer 3

我想您首先通过雅虎工具 SmushIt 获取图像并粉碎它，这会从图像中删除所有不必要的信息。
然后，我将使用您想要在该特定相册上拥有的图像的链接来初始化一个数组，然后只需

`.mousemove(function(){
     set Timeout(function(){
       //code goes here
     },1000)
  })`

在指定相册（例如可以是一个 div）上添加一个
，然后您就可以运行该数组只需使用该数组中的链接更改该 div 的“背景图像”即可。
也许您应该向该操作添加 setTimeout() ，这样就不会运行得那么快。
另一种选择是选择 .hover() 但我不太确定这是否符合您的要求。

Answer 4

我认为最好是我回答这个问题，因为我是相关代码的原始作者:)

首先，我们同意您使用代码（尽管这个问题已经存在一年了，所以您可能已经有了） ，我们目前正在进行一次大的重写，并且该代码作为其中的一部分而被贬值。

Fabián 链接到的文件确实包含您需要的代码，但它还包含您不需要的网站其余部分的许多其他代码。您想要的部分实际上非常简单，但发生了一些不同的事情。在该文件的深处，您将看到 PS.CoverLoader 类。

首先，获取页面的所有拇指并开始在后台加载它们。我们假设它们已经被加载。

轻弹非常简单 - 我将只使用伪代码，因为您已经有 js （并且这些天您可能会使用 jquery）。

create array of all images for album
attach to album mousemove
on move find x position of the mouse
translate that to a position in your array
    segment_size = album_width / img_count
    segment = Math.floor(offset/segment_size)
switch album displayed image to be array[segment]

关于加载大量图像的其他问题。这是一个问题。该系统加载该页面的所有拇指。它的效率很低——有些页面只有 10 或 100 MB。我们尝试为每个包含所有拇指（图像精灵）的相册创建一个长图像，但这实际上不适用于这么多不同的图像。

我的建议是在第一次悬停时加载给定相册的所有图像并将其存储在 js 的数组中。