msgbartop
PHP语言, PHP扩展, Zend引擎相关的研究,技术,新闻分享 – 左手代码 右手诗
msgbarbottom

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

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

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

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

效果如下:

图标标记
1. 显示器
17′的显示器哦~
2. 电话
听筒坏了
3. 机箱
白色的机箱
4. IBM ThinkPad
ThinkPad
5. 外置光驱
我不知道这玩意是哪里买的

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


分享到:



Random Posts:

Tags: ,

4 Responses to “使用CSS实现圈人效果(CSS Sprites)”

  1. 荆棘 |

    我倒想尝试一下~

  2. reeze |

    恩。不过sprites的方式扩展起来比较麻烦啊。得服务器生成图片。。

  3. 雪候鸟 |

    恩,这倒是, 用js也不需要多余生成图片.
    呵呵,只是探讨一种新的方式..

  4. gently |

    仔细的看完了。纯CSS实现起来果然很有魅力。
    如果很后台程序结合起来,这种方式可能会造成很多的代码冗余,创建元素都变成了服务端处理,本来大概只需送出height,width,top,left这些。

Leave a Reply

*