jQuery Animate 動畫練習 – 滑動式彩帶按鈕

這一個範例要讓同學來練習使用 jQuery 的 animate() 指令,設計製作動態滑動的按鈕,由於 jQuery 的 animate() 指令是借用 CSS 的語法來設定動畫效果,將原本靜態的網頁,變成具有動畫效果的呈現,所以在學習 jQuery 之前必須要先對 CSS 網頁排版熟悉,才能自由發揮出  jQuery  的各種動態功能,這是一個相當受現在網頁設計師愛用的功能。

以下的教學說明,就是按照以上所提到的觀念,在網頁在製作時,一開始先使用 CSS 語法把網頁排好,接下來再開始撰寫 jQuery 語法…

 

 


步驟一:

先使用 Photoshop 把我們想要的網頁畫面繪製出來,如下圖:

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-01

 


步驟二:

拿一張 A4 的紙和一支鉛筆,把 HTML 網頁要用到的 div 結構,還有 <h1> 文字標題,超連結按鈕用到的 <ul><li> 標籤先畫出一個草稿圖, 如下:

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-02

 


步驟三:

新增一個 HTML 網頁,照著剛剛畫的草稿,把 HTML 標籤寫出來,如下圖:

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-03

 


步驟四:

再使用 CSS 語法把網頁的排版及相關畫面的設計寫好,如下圖:

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-04

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-05

 


步驟五:

寫好 CSS 語法之後,看到的網頁初步畫面,如下圖:

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-06


步驟六:

為了要再搭配使用 jQuery 語法製作動態效果,之前,要修改一下 css 語法,把畫面做一些調整,如下圖:

第34行:先把 <li> 設定為 position:relative; 座標原點,給裡面的 <a> 超連結使用。

第35行:再 <li> 設定 overflow:hidden; 遮罩功能,等一下裡面的 <a> 寫座標超出 <li> 的範圍時,超連結圖片超出去的部份就會消失看不到。

第43行:為 <a> 超連結寫 position:absolute; 座標功能。

第44行:把 <a> 超連結的座標寫 –250px 圖片就會超出原本所在的 <li> 範圍

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-07

 


步驟七:

使用瀏覽器看一下,原本超連結的彩帶圖片超出去的部份就消失了,只剩下一點點局部還在。

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-08

 


步驟八:

如下圖,第25行,第26行,在 HTML 網頁的最下面,加上我們要用到的 jQuery 連結,第27行加上我們要寫的 javascript 連結。

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-09

 


步驟九:

如下圖所示 jQuery 的語法,相當簡潔易用,很適合大部份的網頁設計師學習。

第8行:當滑鼠摸到超連結圖片時,座標就會 animate 動態滑動到 top:-5 的座標,就會看到彩帶圖片從上面滑下來的效果。

第9行:當滑鼠離開超連結圖片時,座標就會 animate 動態滑動到 top:-250 的座標,就會看到彩帶圖片滑回去消失的效果。

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-10

 


步驟十:

完成後,再使用瀏覽器看一下,使用滑鼠去摸摸看,就可以看到超連結彩帶圖片滑動的效果。

JavaScript 程式設計  - jQuery Animate 動畫練習 - 滑動式彩帶按鈕 - FLY-11

 

 

 


本文作者:
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in JavaScript 程式設計 and tagged , , , , .

迴響已被關閉。