【jQuery Demo】打造动态渐变按钮

这篇随笔的来源于【教程】jQuery打造动态渐变按钮 这篇博文，在下怀着学习的态度，动手去做去理解，并记录下来，和大家分享！

1.看看自己的效果显示：

 

渐变效果


颜色渐变

 

2.html代码：

<!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://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif") 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://images.cnblogs.com/cnblogs_com/yc-755909659/559257/o_ycimg004.gif") 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="https://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() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!

 

posted @ 2013-04-23 17:27  叶超Luka  阅读(1219)  评论(0)  编辑  收藏  举报