10款超實用的JS圖片特效

我們平時在網頁設計中常常會對圖片進行一些特效設計，而通過JS實現圖片特效是一種最為高效的方法，下面就來分享幾款非常實用的JS圖片特效，希望對大家有所幫助。

工具/原料

Dreamweaver

一、JS代碼實現圖片變形效果

1

在網頁中可以通過CSS濾鏡改變圖片的顯示方式，下面這個例子就是通過JS如何實現圖片的變形效果。

本例的重點是css中“filter”濾鏡的使用，“wave”屬性表示以波浪的形式顯示圖片。

參數的説明如下：

Add：一般為1或0;

Freq：變形值;

Lightstrength：變形百分比;

Phase：角度變形百分比;

strengm：變形強度。

2

具體代碼如下：

這是圖片的變形效果

二、JS代碼實現圖片的翻轉效果

1

圖片既可以通過濾鏡也可以通過Photoshop進行特殊處理。本例介紹如何利用css的filter實現圖片翻轉。

本例的重點是CSS濾鏡“filter：flipV”。“flipV”表示垂直翻轉圖片，如果修改為“flipHs”則表示水平翻轉圖片。

2

具體代碼如下：

這是圖片的翻轉效果

三、JS代碼實現圖片的模糊效果

1

很多網站中圖片的模糊效果使用Photoshop完成，其實CSS同樣提供了實現模糊效果的慮鏡。本例學習如何實現圖片的模糊效果。

本例的重點是CSS的濾鏡“filter：blur”，其中“blur”的語法如下所示：

各參數的説明如下：

Add：一般為l或o;

Direction：角度，0～315度.步長為45度;

Strength：效果增長的數值.一般取5即可。

2

具體代碼如下：

這是圖片的`模糊效果

四、JS代碼實現圖片的水印效果

1

圖片的水印效果通過設置樣式的透明變實現。本例以具體實例介紹如何將圖片設置為水印樣式。

本例的重點是CSS的“ofilter”濾鏡效果：“alpha”用來設置透明層次，其使用語法如下所示：

各參數的説明如下：

Opacity：起始值，取值為0～100，0為透明，100為原圖;

FinishOpacity：目標值;

Style：1、2或3;

StartX：任意值;

StartY：任意值。

2

具體代碼如下：

這是圖片的水印效果

五、JS代碼實現圖片淡出淡隱

1

圖片的透明度可以讓圖片具有特殊的效果。本例學習如何利用圖片的透明特性實現淡出淡隱效果。

本例的重點是圖片的透明度屬性“opacity”。此屬性在本例中通過CSS的濾鏡完成，“ity”用來設置圖片的樣式，通過不斷增加或減少圖片的透明度實現淡出淡隱效果。

2具體代碼如下：