KUNKKA

查看Demo： Demo-1  Demo-2  下载源文件

amazing ImageSwitch是一个图片切换脚本，形式上类似于大多数图片切换，只是在切换效果上加了些创新。这个脚本是四个月前写的，期间也有不断地修改和完善。也不知道取个什么名字好，就暂叫amazing ImageSwitch吧 。

amazing ImageSwitch的实现需要点创意，难点在于图片的分割上，其实原理是比较简单的，就好比打碎鸡蛋在组合的过程，首先你需要把图片切割成几块，然后再将它拼接成一个完整的图片才能实现其他动画。但要真正完成图片的分割，js还实现不了，但变通一下将图片转换成背景，利用一下CSS Sprites呢，靠谱。以下是主要思路：

• 根据图片的宽高计算出切割块的数量和宽高（原图的宽度 = 切割快的数量 * 切割块的宽；高度计算同上）
• 利用DOM依次动态循环插入切割块到相应的位置。并利用css进行定位排列。
• 获取图片的src地址，作为背景图片备用，然后使用CSS Sprites技术，将背景定位到相对应的切割快，让其组成一个完整的图片。

当然以上说所只是大概的原理，具体实现还有很多细节上的技术需要考虑，了解详细请查看源代码。

ps：前几天在蓝色上看到一同行做了个类似的效果，详细可查看他的“奇淫技巧之图片切割”一文。声明一下哦，我可没有借鉴抄袭的嫌疑，你可以查看源代码，js的封装和写法都是完全出自不同人的手。只能说实属巧合了，呵呵。原理都差不多，多动动脑子就能想写好玩的东西。