使用jquery创建马赛克/平铺图像效果

Question

有没有办法创建效果shown here on msi.com主图像？虽然在flash中完成，但我更喜欢使用jquery。我也尝试过'马赛克发生器'，但是还没能很好地复制效果，但是使用带有js的发生器也是可以接受的。

[编辑]我没提到，我只对模拟效果的平铺/马赛克方面感兴趣，而不是动画。我想要一个由空白（或颜色可自定义的边框）分隔成9个大小相等的块或每个块的大图像（例如400px×300px）。

虽然我想对每个图像应用单独的悬停效果，但是每个图像都是单独的实体，我不一定需要任何进一步的动画。

圆角并不重要或想要。 [/编辑]

Answer 1

用jquery做这件事会非常有趣。你有一个图像表，每个图像都有一个悬停事件，当鼠标打开和关闭时切换动画。逻辑并不太难;让图像和动画看起来不错会有点困难，但不可撤销。这取决于你想要复制效果的接近程度。 ：D

编辑：你只想要一幅图像拼接？你可以使用一个表来定位所有图像，并使用js来表示事件。您还想要或需要什么？ ：d

Answer 2

这是一个想法。将大图像加载到DIV中。决定你的窗户大小，并创建一个透明的PNG，你喜欢窗户。 （在厚度边界处不透明以控制您对空白的宽度。）要创建效果，请使用三个图层。底层的图像（您可以根据需要更换）。中间层和顶层将沿x轴和y轴重复，并由jQuery单独控制。中间层将具有透明度的PNG，顶部只有一个纯色（将页面的背景与“看起来”不可见？匹配）。要创建任何“漂亮”效果，您可以调整不透明度或为单独框的顶层设置动画，以显示/隐藏底层图像，该图像将通过PNG中间层的透明区域可见。

希望我的解释清楚。通过一些智能编码，可以将其打包并在任何您喜欢的地方重复使用。