jquery - 如何从网页上的数百个小切片构建 Logo 图像

Question

我想将 Logo 图像切片并用许多小切片将其构建在网页上，我想知道执行此操作的最佳方法是什么。如果可能的话，我宁愿避免使用闪光灯。

我可以在 Photoshop 中对 Logo 进行切片，然后逐渐删除切片，并将其另存为一系列图像，以幻灯片形式运行。但当我谈论很多切片时，比如说 500 左右，这需要时间，而且可能看起来不如其他方法好。

有没有一种方法，也许可以使用 jQuery，从大量小的 html 元素构建图像？

或者也许还有更好的方法？

如果有任何建议，我会很高兴。

谢谢

尼克

Answer 1

这是一个我认为即使使用“普通”JavaScript 也相当容易的想法(但使用 jQuery 更容易):

1. 在页面上以 visibility :hidden 样式包含完整图像，并将其放置在相同大小的容器 div 内。
2. 使用 jQuery 创建一个完全位于同一容器 div 内的不透明小 div 网格，并使用 z-index 将它们放置在图像上方，即覆盖图像。当您创建它们时，将对每个的引用存储在数组中。
3. 将图像设置为可见性:“visible”
4. 对上述数组进行随机排序，然后使用 setTimeout 或 setInterval 循环遍历它，在每次迭代中删除一个 div 以逐渐显示图片。

当然，上述的优点是它可以处理任何图片，而无需将其切片，并且考虑到您提到了 500 个切片，您就不会有 500 个 http 请求来加载所有图片片段。如果您希望每个单独的切片显示都具有一点动画效果，您可以使用 jQuery 的 .slideUp() 或其他内容隐藏它。

另一方面，您可能喜欢图片的每一 block 都从不同的方向或其他地方飞来。为此，您仍然可以创建 div 网格，但将每个 div 设置为具有适当的偏移值的图像 (CSS) 背景，以便每个 div 都构成一个单独的“拼图”。

编辑:我忘了提及，可能已经有一个 jQuery 插件(如果不是很多插件的话)可以执行此类操作。我不知 Prop 体是什么，但你可能喜欢用谷歌搜索一下。上面只是我首先想到的从头开始编码的方法......

编辑 2:工作(某种)演示: http://jsfiddle.net/sEE8R/1/ (这只是我根据上面的算法松散拼凑而成的一些狡猾的代码。我使用红色 div 代替图像，它被随机删除的绿色 div 覆盖。)