- 相關推薦
10款超實用的JS圖片特效
我們平時在網(wǎng)頁設計中常常會對圖片進行一些特效設計，而通過JS實現(xiàn)圖片特效是一種最為高效的方法，下面就來分享幾款非常實用的JS圖片特效，希望對大家有所幫助。
工具/原料
Dreamweaver
一、JS代碼實現(xiàn)圖片變形效果
1
在網(wǎng)頁中可以通過CSS濾鏡改變圖片的顯示方式，下面這個例子就是通過JS如何實現(xiàn)圖片的變形效果。
本例的重點是css中“filter”濾鏡的使用，“wave”屬性表示以波浪的形式顯示圖片。
參數(shù)的說明如下：
Add：一般為1或0;
Freq：變形值;
Lightstrength：變形百分比;
Phase：角度變形百分比;
strengm：變形強度。
2
具體代碼如下：
這是圖片的變形效果
二、JS代碼實現(xiàn)圖片的翻轉(zhuǎn)效果
1
圖片既可以通過濾鏡也可以通過Photoshop進行特殊處理。本例介紹如何利用css的filter實現(xiàn)圖片翻轉(zhuǎn)。
本例的重點是CSS濾鏡“filter：flipV”。“flipV”表示垂直翻轉(zhuǎn)圖片，如果修改為“flipHs”則表示水平翻轉(zhuǎn)圖片。
2
具體代碼如下：
這是圖片的翻轉(zhuǎn)效果
三、JS代碼實現(xiàn)圖片的模糊效果
1
很多網(wǎng)站中圖片的模糊效果使用Photoshop完成，其實CSS同樣提供了實現(xiàn)模糊效果的慮鏡。本例學習如何實現(xiàn)圖片的模糊效果。
本例的重點是CSS的濾鏡“filter：blur”，其中“blur”的語法如下所示：
各參數(shù)的說明如下：
Add：一般為l或o;
Direction：角度，0～315度.步長為45度;
Strength：效果增長的數(shù)值.一般取5即可。
2
具體代碼如下：
這是圖片的模糊效果
四、JS代碼實現(xiàn)圖片的水印效果
1
圖片的水印效果通過設置樣式的透明變實現(xiàn)。本例以具體實例介紹如何將圖片設置為水印樣式。
本例的重點是CSS的“ofilter”濾鏡效果：“alpha”用來設置透明層次，其使用語法如下所示：
各參數(shù)的說明如下：
Opacity：起始值，取值為0～100，0為透明，100為原圖;
FinishOpacity：目標值;
Style：1、2或3;
StartX：任意值;
StartY：任意值。
2
具體代碼如下：
這是圖片的水印效果
五、JS代碼實現(xiàn)圖片淡出淡隱
1
圖片的透明度可以讓圖片具有特殊的效果。本例學習如何利用圖片的透明特性實現(xiàn)淡出淡隱效果。
本例的重點是圖片的透明度屬性“opacity”。此屬性在本例中通過CSS的濾鏡完成，“filters.alpha.opacity”用來設置圖片的樣式，通過不斷增加或減少圖片的透明度實現(xiàn)淡出淡隱效果。
2具體代碼如下：
[10款超實用的JS圖片特效]相關文章：
【10款超JS圖片特效】相關文章：
特效設計崗位職責01-03
特效設計崗位職責9篇01-03
特效設計崗位職責(9篇)01-03
變焦特效的10個拍攝技巧分享03-06
特效設計崗位職責集合9篇01-03
特效設計崗位職責集錦9篇02-14
特效設計崗位職責(匯編9篇)01-03
超燃超正義的正能量短句11-06
三觀超正超干凈的文案05-09
三觀超正超干凈的文案15篇05-12