問題討論區


【JavaScript 語法】文章精華區


【教學】 [jQuery]圖片拼圖化



[jQuery]圖片拼圖化
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
這邊所謂的圖片拼圖化是指把圖片像拼圖一樣的切成 N 塊後再拼在一起。如果不太了解什麼是圖片拼圖化的話,讓我們先來看效果畫面

圖片的來源是從挖!Game網站中拿來用的,原圖片當然是沒有格線及...缺了一塊,我們看到的畫面都是使用程式來產生的。什麼~不信,那讓我們來看 HTML 的部份:

HTML 的部份就只有一個 Div 及一個 ImgidshowPuzzle 的是用來擺放程式所產生的圖片拼圖,而 classlists 的則是我們要拿來當拼圖用的圖片囉。基本上就是這樣的簡單,當然還要加上 CSS 的修飾:

這邊我們就把 Img 隱藏起來,並且把 #showPuzzleposition 設為 relative
接下來就是很神奇的 Magic Code 囉:

雖然每一個 Span 使用的背景圖片都一樣,但透過 CSSbackground-position 語法來達到控制背景圖片的位置,因此只要算好要移動的 XY 後,就能產生所謂的拼圖效果

如果要像一開始看到那樣缺某幾塊圖片的話,那只要在迴圈中加入判斷就可以了,例如我要讓它缺 (3, 2) 及 (8, 6) 這兩塊:

只是使用 continue 就能跳過指定的範圍,最後來看看效果怎樣

為了讓它更有趣一點,所以我要再加入透明度的變化,當滑鼠移進移出時有不同的透明度:

這邊我們沒使用 jQuery 1.3 的新功能 live(),而是在產生 Span 時就直接指定透明度跟 hover 事件

雖然效果看起來還蠻有趣的,不過除了拼圖遊戲之外就沒有什麼實際能運用的地方,如果各位有較好的 idea 時,希望能留言一起討論討論囉!
範例瀏覽:
http://abgne.myweb.hinet.net/jQuery/0002/0002_1.html
http://abgne.myweb.hinet.net/jQuery/0002/0002_2.html

 


以上內容於2009-05-03 11:29 發表在 http://blog.xuite.net/abgne/diary1/23747962

2009/5/3 13:59
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS