• 當(dāng)前位置：創(chuàng)新互聯(lián) >> 常見問題 >> 前端開發(fā) >> JavaScript教程 >> 10個能用JavaScript實(shí)現(xiàn)的圖片特效

10個能用JavaScript實(shí)現(xiàn)的圖片特效

• 作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部 點(diǎn)擊數(shù)： 更新時間：2008-12-10
• 　　一般來說，我們在寫博客或做網(wǎng)站時都需要對插圖做一些效果，比如增加陰影、圖片圓角、倒映等等。這些效果一般可以用3個方法實(shí)現(xiàn)，一是用PS實(shí)現(xiàn)對圖片進(jìn)行修改，二 是使用CSS，三是使用JavaScript。使用Photoshop會破壞原圖，而且要花費(fèi)一定的時間 。Netzgesta上有很多實(shí)現(xiàn)圖片特效的JavaScript提供下載，很多效果都是相當(dāng)漂亮的。 
   
  1、水倒映
  
   
  
  這個js將為圖片添加水倒映的特效，時下web2.0站點(diǎn)很喜歡這種效果。下載一個試玩：點(diǎn)擊下載水倒映效果js  
  
  2、圓角+陰影
  
   
  
  或許你記得用RoundPic能在線生成圓角圖片，事實(shí)上用這個js也可以實(shí)現(xiàn)效果。下載一個試玩：點(diǎn)擊下載圓角+陰影效果js
  
  3、高光圓角陰影
  
   
  
  　　這個效果可以用來做按鈕。是我最喜歡的特效之一。
  
  4、斜光陰影效果
  
   
  
  和上面的效果看起來非常相似，但也有不同的地方。下載一個試玩：點(diǎn)擊下載斜光陰影效果js
  
  5、相框效果
  
   
  
  如果你在做圖片博客，可以你會喜歡這個js，使用后博客文章內(nèi)的圖片都有相框的效果。下載一個試玩：點(diǎn)擊下載相框效果js
  
  6、黑色相框
  
  
  
  　　不喜歡白色沒有立體感的相框，那試試這個立體感充足的js效果吧。下載一個試玩：點(diǎn)擊下載黑色相框效果js
  
  7、放大鏡
  
  
  
  　　一個很有趣的js，實(shí)現(xiàn)放大鏡效果。記得在去年Google開發(fā)者日的時候，某個主講人也有說到在GMaps里實(shí)現(xiàn)放大鏡的有趣效果。具體效果點(diǎn)擊這里。
  
  8、菲林效果
  
  
  
  　　如果你在寫一個電影博客，這個效果或許會讓你喜歡。下載一個試玩：點(diǎn)擊下載菲林效果js
  
  9、花邊效果
  
  
  
  　　很簡單的圖片花邊效果。下載一個試玩：點(diǎn)擊下載花邊效果js
  
  10、翻頁效果
  
   
  
  　　翻頁效果是很常見的，Google一下你會發(fā)現(xiàn)有很多相關(guān)的教程，如果你不想花時間去學(xué)，直接下載這個js吧。
  　　下載一個試玩：點(diǎn)擊下載翻頁效果js
  　　安裝使用方法：
  　　將下載的壓縮包解壓之后上傳到網(wǎng)站空間，然后在需要顯示效果的head里添加代碼，比如高光陰影效果Glossy，添加的代碼是：
  　　對于Wordpress，可以在header.php里添加。如果只要求文章頁里出現(xiàn)效果，也可以考慮在single.php里添加。然后，在要顯示特效的圖片的標(biāo)記里添加：
  　　class="glossy"
  　　這樣效果就出現(xiàn)了。
  　　它效果添加方法類似。
• 用JavaScript實(shí)現(xiàn)動畫效果 :上一篇
  JavaScript學(xué)習(xí):刪除數(shù)組元素 :下一篇