网络编程
位置：首页>> 网络编程>> JavaScript>> jQuery打造动态渐变按钮（5）

jQuery打造动态渐变按钮（5）

作者：mankaiviky　来源：蓝色理想　发布时间：2010-05-10 20:21:00　

标签：jquery,动态,按钮,渐变

Step2 - HTML/CSS

按钮的HTML代码很简单：

<a class=”button”>前端档案</a>

再通过CSS设置一下背景图片就可以了，CSS代码如下：

/*链接按钮样式*/
.button {  
    width:200px;  
    height:80px;  
    display:block;  
    background:url(bg_button.gif) top no-repeat;  
    text-indent:-9999px; 
} 
/*按钮悬停样式*/
.button:hover{  
    background:url(bg_button.gif) bottom no-repeat; 
}

按照我们前面设计的图片，按钮的长宽为200px X 80px，背景图为黑色按钮。这段CSS就能够实现我们示例中的第一种效果（纯CSS效果）。

Step3 - JavaScript/jQuery

通过JavaScript，我们可以让按钮更加炫酷一些，我们需要在之前基础上加一个<span>元素，作为鼠标悬停时候显示的背景层，那么HTML会在DOM加载完成后修改成为：

<a class=”button”><span class=”hover”>前端档案</span></a>

<span>元素在鼠标悬停前是全透明的，鼠标经过时，逐渐不透明，以达到渐变的效果，动画过程如下图：

通过以上分析，我们可以写出jQuery代码如下，在DOM加载完成后，为按钮链接添加<span>层作为鼠标经过时的背景图，在为<span>元素添加鼠标悬停事件，鼠标经过时，渐变至不透明，鼠标离开时，渐变至全透明。

//把文本包含到<span>元素中，再附加到.button中 
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () { 
//先设置<span>元素中全透明，再添加鼠标悬停事件 
$('span.hover').css('opacity', 0).hover(function () {  
        $(this).stop().fadeTo(650, 1); //渐变至不透明  
    }, function () {  
        $(this).stop().fadeTo(650, 0); //渐变至全透明  
    }); 
});

至此，我们完成了JS代码，还要注意一个步骤，CSS修改，见Step4。

第一页 上一页 2 3 4
5
6 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com