css滑动门技术小实例

通过css sprites(图片整合)中的滑动门技术实行鼠标点击时背景能够发生改变，效果如图（PS：因为找不到素材就自己用qq表情拼接的，我自己也知道不太好看）：

图片按顺序分别是鼠标没有点击；鼠标点击首页；鼠标点击新闻；鼠标点击娱乐；鼠标点击体育以及页面用到的原始背景图片。

代码如下：

首页
新闻
娱乐
体育

 p2、p3、p4需要将背景图片进行移动才能达到预期效果，而p1不用。这是因为p2、p3、p4的背景图片都默认从图片的最左上角开始。