在梅干的教學網中,各位應該會發現到,當圖片太大時滑鼠只要滑入縮圖,右邊就會跑出原始尺寸的圖片影像, 而那是套用了jQuery的Zoom元件,但梅干最近發現國外有個網站,是專門在研發這類型的元件, 且效果還相當的多元,各種放大的效果應有盡有,且套用還相當的容易,對f於圖片預覽縮放感興趣的朋友,不坊也來看看囉!
MagicToolBox套件:
Step1
進入官網後,下方就是所有縮放功能的列表與說明,只要點【Demo】鈕就可觀看特效的展示。
Step2
接著拉到下方,有一個Examples下方有一個examples of Magic Zoom Plus連結,點一下可看到完整的展示內容。
Step3
每一個範例都可玩玩看,只要滑鼠滑入就會不同的縮放效果。
Step4
若喜歡此效果,對著右邊的【Download】鈕點一下,就可下載試用。
Step5
下載完畢後,解壓縮並對著index.html雙響。
Step6
這時就可開啟展示頁,相當的貼心,左邊的Examples就是特效的清單,右上是展示的效果,下方是該範例的原始碼。
Step7
當要套用時,分別將magiczoomplus與images資料夾拷貝出來。
Step8
接下來將剛的特效的原始碼拷貝出來,並且只要修改圖片的路徑與名稱。
Step9
儲存完就可使用了,但若是試用版的話,圖下方會出現Please upgrade to full..等文字,若覺得礙眼的話,就得花錢買囉!但該元件的授權方式是用站台來算,若要給愈多站台用費用就愈高,不在意的話就加減用吧!必竟還不會太干擾畫面
[範例預覽]