使用jquery创建马赛克/平铺图像效果
有没有办法创建 msi.com 上显示的效果主图像？ 虽然是用 flash 完成的，但我更喜欢用 jquery 来完成。 我也尝试过“马赛克生成器”，但无法很好地复制效果，但使用带有 js 的生成器也是可以接受的。
[编辑]我没有提到，我只对模拟效果的平铺/马赛克方面感兴趣，而不是动画。 我想要一个大图像（例如 400 像素 x 300 像素），由空白（或颜色可自定义边框）分隔成 9 个相同大小的块或图块。
虽然我想对每个图像应用单独的悬停效果，使每个效果都是单独的实体，但我不一定需要任何进一步的动画。
圆角并不重要或不需要。 [/编辑]
Is there a way to create the effect shown here on msi.com main image? Though done in flash, I'd prefer doing it with jquery. I've also tried with 'mosaic generators', but haven't been able to replicate the effect well, but use of a generator with js would be acceptable too.
[edit] I failed to mention, I'm only interested in emulated the tiled/mosaic aspect of the effect, not animation. I'd like a large image (e.g. 400px by 300px) separated by whitespace (or color customizable borders) into 9 equally sized blocks or tiles each.
While I would like to apply a individual hover effect to each image, giving each the effect they are separate entities, I don't necessarily need any further animation.
Rounded corners aren't important or wanted.
[/edit]
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
用 jquery 来做这件事会很有趣。 您将有一个图像表，每个图像都有一个悬停事件，该事件在鼠标打开和关闭时切换动画。 逻辑并不太难； 让图像和动画看起来漂亮会有点困难，但并非不可逆转。 这取决于您想要复制效果的程度。 :D编辑：你只想要图像马赛克？ 您可以使用表格来定位所有图像，并使用 js 来处理事件。 你还想要或需要 js 做什么？ ：D
It would be pretty interesting to do it with jquery. You'd have a table of images, each with a hover event that toggled an animation when mousing on and off. The logic isn't too hard; getting the images and the animation to look nice would be a little harder, but not undoable. It depends on how closely you want to replicate the effect. :Dedit: you just want a mosaic of images? you can just use a table to position all of the images, and use js for the events. What else do you want or need js for? :D
这是一个想法。 将大图像加载到 DIV 中。 决定窗口的大小，并在您希望窗口所在的位置创建一个具有透明度的 PNG。 （边界不透明，厚度可控制空白的宽度。）要创建效果，请使用三个图层。 底层的图像（您可以根据需要更换）。 中间层和顶层将沿 x 轴和 y 轴重复，并由 jQuery 单独控制。 中间层将具有透明的 PNG，最上面的层将只有纯色（与页面的背景匹配以“看起来”不可见？）。 要创建任何“漂亮”效果，您可以调整不透明度或对单独框的顶层进行动画处理，以显示/隐藏底层上的图像，该图像通过 PNG 中的中间层的透明区域可见。
希望我的解释很清楚。 通过一些智能编码，可以将其打包并在您想要的任何地方重复使用。
Here's an idea. Load a large image into a DIV. Decide on the size of your windows and create a PNG with transparency where you'd like the windows to be. (Opaque at the borders with thickness to control how wide you'd like the whitespace.) To create the effect, use three layers. The image at the bottom layer (which you can swap out as needed). The middle and top layer will be repeated along the x and y axises and controlled individually by jQuery. The middle layer will have the PNG with transparency and on top of that, the top layer with just a solid color (matching your page's background to "seem" invisible?). To create any "pretty" effects, you can adjust the opacity or animate the top layer of the separate boxes to show/hide the image on the bottom layer which will be visible through the middle layer's transparent area in the PNG.
Hope my explanation was clear. With some smart coding, this can be packaged and reused anywhere you'd like.