网页前端学习之jQuery动态渐变按钮(呼吸灯效果)

很早就看到了国外一个网站精湛的呼吸灯设计http://dragoninteractive.com/,很是佩服,最近找到了相关的教程实例,跟着做了一下子,现在记录备份之

效果demo

<!--
/*链接按钮样式*/
.jsbutton {
			position:relative;
			display:block;
			width:200px;
			height:80px;
			background:url(bg_button.gif) top no-repeat;
			cursor: pointer;
			text-indent:-9999px;
		}
.jsbutton span.hover {
			position: absolute;
			display: block;
			width:200px;
			height:80px;
			background:url(bg_button.gif) bottom no-repeat;
			text-indent:-9999px;
		}
-->
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
<h2>jQuery动态渐变效果(呼吸灯效果) <small>| xhtml + css + javascript</small></h2>
<a class="jsbutton" href="http://myya.net">T先生和兜兜</a>

via:http://www.cnblogs.com/wiky/articles/gradual-change-button.html

9 Comments

砼砼May 21st, 2010 at 2:18 am

很不错的样子,源码收了~嘿嘿

樊文生May 30th, 2010 at 12:22 pm

JQuery真的很强悍

zwwoooooMay 30th, 2010 at 3:22 pm

很不错的效果,什么时候用用

karmJune 1st, 2010 at 4:57 pm

效果真不错,源码保存一个

Louis HanJune 8th, 2010 at 1:34 am

效果很cool

卜卜口のJune 26th, 2010 at 12:18 am

这个也可以用CSS3做到的嘛~

听云June 26th, 2010 at 12:34 am

是么,那css3真是强大

卜卜口のJune 26th, 2010 at 12:55 am

@听云 ^_^ 但是现在CSS3还没有普及嘛~

听云June 26th, 2010 at 2:41 am

也是现在貌似只有chrome对css3支持最好