05 May 09 使用CSS实现圈人效果(CSS Sprites)

我最早了解到”图片合并”技术, 应该是在大学游戏时代, 会发现很多游戏图标, 都会合并在一个位图中, 然后使用类似”遮罩”的技术来分别显示各种图标.

第一次使用CSS Sprites技术的时候, 其实并不知道它的这个名字, 也并没觉得多稀奇,就是个遮罩么.

今天玩开心网的圈人游戏时候, 发现它的实现是使用了Js, 突发奇想, 或许可以使用CSS Sprites来实现, 抛弃内嵌的JS.

效果如下:

有兴趣的同学, 可以直接看HTML源码, 一个独立页面的例子在这里

Filed in Js/CSS

reeze | 11 Jun 2009 15:51
恩。不过sprites的方式扩展起来比较麻烦啊。得服务器生成图片。。
雪候鸟 | 05 May 2009 16:18
恩,这倒是, 用js也不需要多余生成图片.
呵呵,只是探讨一种新的方式..
gently | 05 May 2009 15:41
仔细的看完了。纯CSS实现起来果然很有魅力。
如果很后台程序结合起来，这种方式可能会造成很多的代码冗余，创建元素都变成了服务端处理，本来大概只需送出height,width,top,left这些。