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

Question

有没有办法创建效果shown here on msi.com主图像？虽然在Flash中完成，我宁愿用jQuery来做。我也尝试过'马赛克发电机'，但一直无法很好地复制效果，但使用带有js的发电机也是可以接受的。

我没有提及，我只是在模仿效果的平铺/马赛克方面感兴趣，而不是动画。我想要一个大的图像（例如400x300像素）用空格（或颜色可定制的边框）分隔成9个相同大小的块或瓷砖。

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

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

Answer 1

这将是非常有趣的做它与jQuery。您将拥有一张图像表格，每个图像都有一个悬停事件，可以在开启和关闭时切换动画。逻辑不是太难;让图像和动画看起来不错会有点困难，但不可撤销。这取决于你想如何复制效果。 ：D

编辑：你只是想要一个马赛克的图像？您可以使用表格来定位所有图像，并使用js来处理事件。你还想要什么？ ：D

Answer 2

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

希望我的解释清楚。通过一些智能编码，可以随意打包和重复使用。