IInterest'Blog

呼吸灯效果的按钮

昨天看到一个鼠标的呼吸灯效果,很是喜欢,于是用1张jpg+2张gif图片做了个呼吸灯效果的按钮,因为2个gif图片加起来就差不多28K,~~所以还用了个CSS图片缓存…~~[CSS图片缓存会使gif提前载入,但在IE下gif载入后就直接播放了,这就无法实现呼吸灯的效果,暂时没找到解决办法].这个只能算是自娱自乐,因为开销比较大,所以实用性不强.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iinterest</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <style> * { padding:0; margin:0; } p{ margin:10px 0; text-align:center;} .content{ width:300px; margin:40px auto;} a.btn{ display:block; width:142px; height:43px; background:url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_002.jpg) no-repeat; text-indent:-9999px; cursor:pointer;} </style> <script language="javascript"> function bnt_change(style){ var btn = document.getElementById("btn"); if(style==1){ btn.style.background = "url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_001.gif)"; } else{ btn.style.background = "url(http://image215.poco.cn/mypoco/myphoto/20091210/17/51737245200912101716151943974301505_000.gif)"; } } </script> </head> <body> <p> <del datetime="2009-12-11T03:16:40+00:00">请等待3秒再将鼠标移到按钮上看效果 :) </del></p> <div class="content"> <a href="#;" id="btn" class="btn" onmouseout="bnt_change(1);" onmouseover="bnt_change(2);"> </a> </div> </body> </html>

提示：你可以先修改部分代码再运行。

This entry was posted in UE. Bookmark the permalink.

6 Responses to 呼吸灯效果的按钮

Bell says:

2010年12月7日 at 5:08 下午

@ ugg boots mini 哪里。。。这个只是一时兴起做的，离实用还很远
ugg boots mini says:

2010年12月7日 at 3:25 下午

高手就是高手啊。。我自退三步
Bell says:

2009年12月14日 at 10:11 上午

@网络砖家恩,我想也是.不过我对flash不太熟…哈哈
网络砖家 says:

2009年12月14日 at 3:02 上午

我估计用FLASH制作的话，文件都没这么大的哦。。。
Bell says:

2009年12月13日 at 1:18 下午

恩，先前用了个css图片缓存，可以在触发js之前就载入图片，但因为在ie下有点问题最后删除了。
三七八蛋 says:

2009年12月13日 at 11:16 上午

为什么要等待3秒？等载入？

呼吸灯效果的按钮

6 Responses to 呼吸灯效果的按钮

发表评论取消回复

搜索

分类

近期文章

文章

HTML5相关

在线工具

功能

呼吸灯效果的按钮

6 Responses to 呼吸灯效果的按钮

发表评论 取消回复

搜索

分类

近期文章

文章

标签云

HTML5相关

在线工具

功能

发表评论取消回复