【教程】jQuery打造動態漸層按鈕

　　這是寫給web設計者和前端開發人員的教程，我們將示範如何使用Photoshop建立按鈕的sprite圖，然後是如何使用jQurey打造動態漸層效果。本教程分為以下三步：

Step1 - PhotoshopStep2 - HTML/CSSStep3 - JavaScript(jQuery)Step4 - CSS修改

 

　　最終結果如下：

　　您可以點擊查看示範，也可以點擊下載原始碼。

 

Step1 - Photoshop

1. 建立檔案

　　按鈕的尺寸是100px X 80px，但由於我們需要建立一個有兩種狀態的CSS sprite背景圖，所以我們在Photoshop中建立（Ctrl+N）一個長寬為200px X 160px的圖片檔案，如：

2. 建立輔助線

　　為了使繪製按鈕更容易，我們建立輔助線，從尺規中拉出輔助線，如果你找不到尺規，可以按Ctrl+R顯示，如：

3. 繪製形狀

　　選擇工具面板中的矩形工具，設定圓角半徑為10px，在畫布上繪製形狀，如：

4. 設定形狀樣式

　　接最後一步，雙擊層，開啟圖層樣式視窗，設定形狀的樣式，首先選擇漸層疊加，設定漸層顏色從#3d3d3d到#8b8b8b，如：

　　然後，選擇“內發光”，設定混合模式為“正常”，不透明度為100%，顏色設定為#ffffff，圖素大小設定為3像素，如：

　　之後，再選擇“描邊”，設定大小為1像素，位置為“內部”，顏色為黑色#000000，如：

5. 添加字型

　　輸入文本，設定文字相對水平和垂直置中，字型為方正准圓簡體，字型大小36點，加粗平滑，顏色為白色（#FFFFFF），如：

6. 設定字型樣式

　　同樣的雙擊文字圖層，開啟文字圖層樣式，設定字型樣式，點擊“投影”，設定混合模式為“正常”，顏色為#3e3e3e，不透明度為100%，角度為90度，距離為1像素，大小為2像素；點擊“內陰影”，設定混合模式為“正常”，顏色為#454545，不透明度為75%，角度為90度，距離為1像素，大小為2像素，如所示：

　　至此，我們就完成連結狀態下的按鈕背景圖，效果如下：

7. 懸停背景圖

　　製作滑鼠移至上方狀態下的按鈕背景圖，把圖層放入組內，複製組，移動，並重新命名，如：

8.背景圖屬性

　　修改hover背景圖的樣式屬性，開啟背景圖的圖層樣式視窗，選擇“描邊”，修改邊框顏色為#004d77；選擇“漸層疊加”，修改漸層從#1671a3到#5baedc，如：

 

9. 設定字型樣式

　　開啟字型圖層樣式，選擇“投影”，修改投影顏色為#207aad；選擇“內陰影”，修改字型顏色為#0d4f74，如：

10. 圖層半透明

　　添加圖層半透明效果，按以上步驟修改，滑鼠移至上方背景圖如下，最後是再加上一層半透明層，先添加一個200px X 40px的白色層，置頂並設定白色層的透明度為10%，如：

　　最後，我們完成的CSS sprite背景圖如下，您也可以點擊下載PSD檔案。

 

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。

 

Step4 - CSS修改

　　在純CSS效果的樣本中，我們是利用:hover偽類來實現sprite圖片的切換，當我們使用jQuery後，是引入一個<span>層作為滑鼠經過時背景圖，所以CSS需要做如下修改：

/*之前的按鈕懸停樣式*/.button:hover{background:url(bg_button.gif) bottom no-repeat;}修改為/*不需要在設定:hover的樣式，而是設定span.hover的樣式*/.button span.hover {/*注意要使用絕對位置*/position: absolute; display: block;width:200px;height:80px;background:url(bg_button.gif) bottom no-repeat;text-indent:-9999px;}

 

總結

　　以上我們按4個步驟實現了一個動態漸層按鈕，在示範中，我還提供了一個擴充樣本，您可以跟著自己實現一個，也可以下載原始碼修改定製，當然，您有什麼好的提議或者有什麼問題，歡迎給我留言。

　　查看最終效果

　　下載原始碼

本文地址：http://www.cnblogs.com/wiky/articles/gradual-change-button.html

PS：本文由維奇原創，如有轉載請註明出處，謝謝！