中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

Step3 - JavaScript/jQuery

通過JavaScript，我們可以讓按鈕更加炫酷一些，我們需要在之前基礎上加一個<span>元素，作為鼠標懸停時候顯示的背景層，那么HTML會在DOM加載完成后修改成為：

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

<span>元素在鼠標懸停前是全透明的，鼠標經(jīng)過時，逐漸不透明，以達到漸變的效果，動畫過程如下圖：

通過以上分析，我們可以寫出jQuery代碼如下，在DOM加載完成后，為按鈕鏈接添加<span>層作為鼠標經(jīng)過時的背景圖，在為<span>元素添加鼠標懸停事件，鼠標經(jīng)過時，漸變至不透明，鼠標離開時，漸變至全透明。

//把文本包含到<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。

出處：藍色理想
責任編輯：moby

上一頁 jQuery打造動態(tài)漸變按鈕 [5] 下一頁 jQuery打造動態(tài)漸變按鈕 [7]

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。