欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 打造動(dòng)態(tài)漸變按鈕 詳細(xì)圖文教程

 更新時(shí)間：2010年04月25日 02:31:37   作者：  
這是寫(xiě)給web設(shè)計(jì)者和前端開(kāi)發(fā)者的教程，我們將演示如何使用Photoshop創(chuàng)建按鈕的sprite圖，然后是如何使用jQurey打造動(dòng)態(tài)漸變效果。
本教程分為以下三步：

Step1 - Photoshop

Step2 - HTML/CSS

Step3 - JavaScript(jQuery)

Step4 - CSS修改

 

　　最終結(jié)果如下：


Step1 - Photoshop

1. 新建文件

　　按鈕的尺寸是100px X 80px，但由于我們需要?jiǎng)?chuàng)建一個(gè)有兩種狀態(tài)的CSS sprite背景圖，所以我們?cè)赑hotoshop中創(chuàng)建（Ctrl+N）一個(gè)長(zhǎng)寬為200px X 160px的圖片文件，如下圖：

2. 創(chuàng)建參考線

　　為了使繪制按鈕更容易，我們創(chuàng)建參考線，從標(biāo)尺中拉出參考線，如果你找不到標(biāo)尺，可以按Ctrl+R顯示，如下圖：

3. 繪制形狀

　　選擇工具面板中的矩形工具，設(shè)置圓角半徑為10px，在畫(huà)布上繪制形狀，如下圖：

4. 設(shè)置形狀樣式

　　接上圖最后一步，雙擊層，打開(kāi)圖層樣式窗口，設(shè)置形狀的樣式，首先選擇漸變疊加，設(shè)置漸變顏色從#3d3d3d到#8b8b8b，如下圖：

　　然后，選擇“內(nèi)發(fā)光”，設(shè)置混合模式為“正?！?，不透明度為100%，顏色設(shè)置為#ffffff，圖素大小設(shè)置為3像素，如下圖：

　　之后，再選擇“描邊”，設(shè)置大小為1像素，位置為“內(nèi)部”，顏色為黑色#000000，如下圖：

5. 添加字體

　　輸入文本，設(shè)置文字相對(duì)水平和垂直居中，字體為方正準(zhǔn)圓簡(jiǎn)體，字號(hào)36點(diǎn)，加粗平滑，顏色為白色（#FFFFFF），如下圖：

6. 設(shè)置字體樣式

　　同樣的雙擊文字圖層，打開(kāi)文字圖層樣式，設(shè)置字體樣式，點(diǎn)擊“投影”，設(shè)置混合模式為“正?！?，顏色為#3e3e3e，不透明度為100%，角度為90度，距離為1像素，大小為2像素；點(diǎn)擊“內(nèi)陰影”，設(shè)置混合模式為“正常”，顏色為#454545，不透明度為75%，角度為90度，距離為1像素，大小為2像素，如下圖所示：

　　至此，我們就完成鏈接狀態(tài)下的按鈕背景圖，效果如下：

7. 懸停背景圖

　　制作鼠標(biāo)懸停狀態(tài)下的按鈕背景圖，把圖層放入組內(nèi)，復(fù)制組，移動(dòng)，并重命名，如下圖：

8.背景圖屬性

　　修改hover背景圖的樣式屬性，打開(kāi)背景圖的圖層樣式窗口，選擇“描邊”，修改邊框顏色為#004d77；選擇“漸變疊加”，修改漸變從#1671a3到#5baedc，如下圖：

 

9. 設(shè)置字體樣式

　　打開(kāi)字體圖層樣式，選擇“投影”，修改投影顏色為#207aad；選擇“內(nèi)陰影”，修改字體顏色為#0d4f74，如下圖：

10. 圖層半透明

　　添加圖層半透明效果，按以上步驟修改，鼠標(biāo)懸停背景圖如下，最后是再加上一層半透明層，先添加一個(gè)200px X 40px的白色層，置頂并設(shè)置白色層的透明度為10%，如下圖：

　　最后，我們完成的CSS sprite背景圖如下，您也可以點(diǎn)擊下載PSD文件。


Step2 - HTML/CSS
　　按鈕的HTML代碼很簡(jiǎn)單：
<a class=”button”>前端檔案</a>
　　再通過(guò)CSS設(shè)置一下背景圖片就可以了，CSS代碼如下：
復(fù)制代碼 代碼如下:

/*鏈接按鈕樣式*/
.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;
}

　　按照我們前面設(shè)計(jì)的圖片，按鈕的長(zhǎng)寬為200px X 80px，背景圖為黑色按鈕。這段CSS就能夠?qū)崿F(xiàn)我們示例中的第一種效果（純CSS效果）。

Step3 - JavaScript/jQuery

　　通過(guò)JavaScript，我們可以讓按鈕更加炫酷一些，我們需要在之前基礎(chǔ)上加一個(gè)<span>元素，作為鼠標(biāo)懸停時(shí)候顯示的背景層，那么HTML會(huì)在DOM加載完成后修改成為：

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

　　<span>元素在鼠標(biāo)懸停前是全透明的，鼠標(biāo)經(jīng)過(guò)時(shí)，逐漸不透明，以達(dá)到漸變的效果，動(dòng)畫(huà)過(guò)程如下圖：

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

復(fù)制代碼 代碼如下:

//把文本包含到<span>元素中，再附加到.button中
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
//先設(shè)置<span>元素中全透明，再添加鼠標(biāo)懸停事件
$('span.hover').css('opacity', 0).hover(function () {
$(this).stop().fadeTo(650, 1); //漸變至不透明
}, function () {
$(this).stop().fadeTo(650, 0); //漸變至全透明
});
});

至此，我們完成了JS代碼，還要注意一個(gè)步驟，CSS修改，見(jiàn)Step4。
Step4 - CSS修改
　　在純CSS效果的示例中，我們是利用:hover偽類(lèi)來(lái)實(shí)現(xiàn)sprite圖片的切換，當(dāng)我們使用jQuery后，是引入一個(gè)<span>層作為鼠標(biāo)經(jīng)過(guò)時(shí)背景圖，所以CSS需要做如下修改：
復(fù)制代碼 代碼如下:

/*之前的按鈕懸停樣式*/
.button:hover{
background:url(bg_button.gif) bottom no-repeat;
}

修改為
復(fù)制代碼 代碼如下:

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

總結(jié)
　　以上我們按4個(gè)步驟實(shí)現(xiàn)了一個(gè)動(dòng)態(tài)漸變按鈕，在演示中，我還提供了一個(gè)擴(kuò)展示例，您可以跟著自己實(shí)現(xiàn)一個(gè)，也可以下載源代碼修改定制，當(dāng)然，您有什么好的提議或者有什么問(wèn)題，歡迎給我留言。
演示地址 http://demo.jb51.net/js/gcb_download/gradual-change-button.html
下載地址 http://demo.jb51.net/js/gcb_download/gcb_download.rar

相關(guān)文章

最新評(píng)論