[Javascript] Instant-相簿效果

分類: 技術分享 作者: abu

9 4 月 2009

如果要將一般圖片加上邊緣鋸齒或是圓角,或是傾斜,或是陰影等等,這些效果要花多久時間呢?
instant_s1

答案是短短幾秒,透過instant這款外掛,只要載入後,在圖片加上class,即可完成複雜的圖片樣式設計,讓硬梆梆的圖片,頓時生動了起來,更重要的是,不需要任何繁雜的手續,只需兩三行程式就可完成 ( ps :本款外掛在firefox、ie、opera、safari也都可正常使用 )

instant_s2

instant是透過img標籤內的class設定,將原始圖片加上各式特效,像是ishadow40中的"40"是設定陰影的色彩,數字越大代表顏色越深,itiltleft中的"left"是設定圖片的傾斜方向,可用left或是right讓圖片往左或往右,設定上很多變化~

使用方式介紹:

載入 instant

<script src="instant.js" type="text/javascript"></script>

html 格式

<img class="instant itiltleft icolorFFFCE9 ishadow40 historical" src="image.gif" alt="" />

我們來試試看,若是將lativ女裝商品圖,置換成相簿效果!
原始樣式:
instant_s3_a
套用之後:
instant_s3_a

效果還不錯,個人覺得,左右歪斜可用亂數去跑,讓整個商品列表更加活潑,不過,這可能見仁見智,有人會覺得這樣太亂,還是規則的正正方方樣式比較簡潔有力,不過,能有多一種選擇方式呈現樣式,也是不錯

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。