我想将徽标图像切片并用许多小切片将其构建在网页上，我想知道执行此操作的最佳方法是什么。如果可能的话，我宁愿避免使用闪光灯。
我可以在 Photoshop 中对徽标进行切片，然后逐渐删除切片，并将其保存为一系列图像，以幻灯片形式运行。但当我谈论很多切片时，比如说 500 个左右，这需要时间，而且看起来可能不如其他方法好。
有没有办法，也许使用 jQuery，从大量小的 html 元素构建图像？
或者也许还有更好的方法？
我很高兴收到任何建议。
谢谢，
尼克
I would like to slice up a logo image and build it on a webpage from lots of small slices and I am wondering what the best way to do this would be. I would rather avoid flash if possible.
I can slice up the logo in Photoshop and gradually remove the slices, and save it as a series of images which run as a slideshow. But as I am talking about a lot of slices, say around 500, that would take time and may not look as good as other methods.
Is there a way, using jQuery perhaps, of building an image from lots of small html elements?
Or perhaps there is a better way still?
I'd be glad of any advice.
Thanks,
Nick
发布评论
评论（3）
这是一个我认为即使使用“普通”JavaScript 也相当容易的想法（但使用 jQuery 更容易）：
visibility :hidden样式包含页面上的完整图像大小相同。z-index将它们放置在图像上方，即覆盖图像。创建它们时，将对每个的引用存储在数组中。visibility : "visible"setTimeout或setInterval循环遍历它，删除每个数组上的一个 div迭代以逐渐显示图片。当然，上述的优点是它可以处理任何图片，而无需将其切片，并且考虑到您提到了 500 个切片，您不会有 500 个 http 请求来加载所有图片片段。如果您希望每个单独的切片显示都具有一点动画效果，您可以使用 jQuery 的
.slideUp()或其他内容隐藏它。另一方面，您可能喜欢图片的每一块都从不同的方向或其他地方飞来。为此，您仍然可以创建 div 网格，但将每个 div 设置为具有适当的偏移值的图像 (CSS) 背景，以便每个 div 都成为一个单独的“拼图”。
编辑：我忘了提及，可能已经有一个 jQuery 插件（如果不是很多插件的话）可以做这种事情。我不知道具体是什么，但你可能喜欢用谷歌搜索一下。上面只是我首先想到的从头开始编码的方法...
编辑 2：工作（有点）演示： http://jsfiddle.net/sEE8R/1/ （这只是我根据上面的算法松散拼凑而成的一些狡猾的代码。而不是图像我用过红色div，它被随机删除的绿色 div 覆盖。）
Here's an idea that I think would be fairly easy even with "plain" JavaScript (but much easier with jQuery):
visibility : hidden, inside a container div of the same size.z-indexthat places them above the image, i.e., covering the image. As you create them store a reference to each in an array.visibility : "visible"setTimeoutorsetInterval, removing a div on each iteration to gradually reveal the picture.Of course the advantage of the above is that it would work with any picture without having to slice it up, and given that you mentioned 500 slices you wouldn't have 500 http requests to load all the pieces of picture. If you wanted each individual slice reveal to have a little animation effect you could hide it with jQuery's
.slideUp()or something.On the other hand, you may like each piece of the picture to come flying in from different directions or something. For that you could still create the grid of divs, but set each to have a (CSS) background of your image with appropriate offset values so that each makes a separate piece of the "puzzle".
EDIT: I forgot to mention that there's probably already a jQuery plugin (if not numerous plugins) that do this sort of thing. I'm not aware of a specific one, but you may like to do some googling. The above is just the first thing that came to mind as a way to code it from scratch...
EDIT 2: Working (sort of) demo: http://jsfiddle.net/sEE8R/1/ (This is just some dodgy code that I cobbled together loosely based on the algorithm above. Instead of an image I've used a red div, which gets covered in green divs that are randomly removed.)
使用原始图像，就好像它是 CSS sprite 一样，并以编程方式创建作为其子集切片的元素。
或者，加载图像，重复使用
drawImage()将其子部分绘制到 HTML5 Canvas，使用toDataURL()获取字符串并创建新图像JS 中的设置为此数据 URL。Use the original image as though it were a CSS sprite, and programmatically create elements that are subset slices of it.
Alternatively, load your image, repeatedly use
drawImage()to draw subsections of it to an HTML5 Canvas, usetoDataURL()to get a string and createnew Imagein JS set to this data URL.如果您的徽标被制作出来，您可能需要检查：
http://slicephotoshop.com
轻松“切片”您的徽标层数。
You might want to check:
http://slicephotoshop.com
to easily "slice" your logo, if your logo is made out of layers.