一般來說,我們在寫博客或做網站時都需要對插圖做一些效果,比如增加陰影、圖片圓角、倒映等等。這些效果一般可以用3個方法實現,一是用PS實現對圖片進行修改,二是使用CSS,三是使用JavaScript。使用PS會破壞原圖,而且要花費一定的時間。Netzgesta上有很多實現圖片特效的JavaScript提供下載,很多效果都是相當漂亮的。
1、水倒映
這個js將爲圖片添加水倒映的特效,時下web2.0站點很喜歡這種效果。
如果你喜歡在線生成水倒映效果,可以參考這裏。
2、圓角+陰影
或許你記得用RoundPic能在線生成圓角圖片,事實上用這個js也可以實現效果。
3、高光圓角陰影
這個效果可以用來做按鈕。是我最喜歡的特效之一。
4、斜光陰影效果
和上面的效果看起來非常相似,但也有不同的地方。
5、相框效果
如果你在做圖片博客,可以你會喜歡這個js,使用後博客文章內的圖片都有相框的效果。
6、黑色相框
不喜歡白色沒有立體感的相框,那試試這個立體感充足的js效果吧。
7、放大鏡
一個很有趣的js,實現放大鏡效果。記得在去年Google開發者日的時候,某個主講人也有說到在GMaps裏實現放大鏡的有趣效果。具體效果點擊這裏。
8、菲林效果
如果你在寫一個電影博客,這個效果或許會讓你喜歡。
9、花邊效果
很簡單的圖片花邊效果。
10、翻頁效果
翻頁效果是很常見的,Google一下你會發現有很多相關的教程,如果你不想花時間去學,直接下載這個js吧。
安裝使用方法:
將下載的壓縮包解壓之後上傳到網站空間,然後在需要顯示效果的head裏添加代碼,比如高光陰影效果Glossy,添加的代碼是:
<script type="text/javascript" src="glossy.js"></script>
對於Wordpress,可以在header.php裏添加。如果只要求文章頁裏出現效果,也可以考慮在single.php裏添加。
然後,在想要顯示特效的圖片的<img>標記裏添加:
class="glossy"
這樣效果就出現了。
其它效果添加方法類似。
via BlogOhblog。