jQuery打造动态渐变按钮
><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery打造动态渐变按钮</title><style type="text/css" >.button{ background: url("http://y.photo.qq.com/img?s=uDgIxsWYI&l=y.jpg") top no-repeat; display: block; height: 80px; width: 200px; text-indent: -9999px;}/*不需要在设置:hover的样式，而是设置span.hover的样式*/.button span.hover{ position: absolute; display: block; width: 200px; height: 80px; text-indent: -9999px; background: url("http://y.photo.qq.com/img?s=uDgIxsWYI&l=y.jpg") bottom no-repeat;}.content{ margin: 0 auto; width: 666px;}.jsbutton{ background: #F00; display: block; height: 80px; width: 200px; text-indent: -9999px;}/*不需要在设置:hover的样式，而是设置span.hover的样式*/.jsbutton span.hover{ /*注意要使用绝对定位*/ position: absolute; display: block; width: 200px; height: 80px; text-indent: -9999px; background: #00F;}</style><script type="application/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"></script><script type="application/javascript">$(document).ready(function() { //把文本包含到<span>元素中，再附加到.jsbutton中 $(".jsbutton,.button").wrapInner('<span class="hover"></span>').css('textIndex','0').each(function() { //先设置<span>元素中全透明，再添加鼠标悬停事件 $("span.hover").css('opacity',0).hover(function() { $(this).stop().fadeTo(650,1); //渐变至不透明 },function(){ $(this).fadeTo(650,0);//渐变至全透明 }); });});</script></head><body><div class="content"> <div>渐变效果</div> <div><a class="button">编程之路</a></div> <br /> <br /> <div>颜色渐变</div> <div><a class="jsbutton">编程之路</a></div></div></body></html>
?
3.个人理解：
其实就是先应用的jQuery的wrapInner() 方法把"<span class="hover"></span>"添加到指定样式的a标签中,然后使用each() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!
?