<script type="application/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"></script> <script type="application/javascript">// 元素中,再附加到.jsbutton中 $(".jsbutton,.button").wrapInner('').css('textIndex','0').each(function() { //先设置元素中全透明,再添加鼠标悬停事件 $("span.hover").css('opacity',0).hover(function() { $(this).stop().fadeTo(650,1); //渐变至不透明 },function(){ $(this).fadeTo(650,0);//渐变至全透明 }); }); }); // ]]></script>
这篇随笔的来源于【教程】jQuery打造动态渐变按钮 这篇博文,在下怀着学习的态度,动手去做去理解,并记录下来,和大家分享!
1.看看自己的效果显示:
2.html代码:
![](https://i-blog.csdnimg.cn/blog_migrate/cdec0645add3fc3c328197dda5c76203.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>