10款超實用的JS圖片特效

我們平時在網(wǎng)頁設(shè)計中常常會對圖片進行一些特效設(shè)計，而通過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

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

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

各參數(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”用來設(shè)置圖片的樣式，通過不斷增加或減少圖片的透明度實現(xiàn)淡出淡隱效果。

2具體代碼如下：

[10款超實用的JS圖片特效]相關(guān)文章：

1.10款超實用的JS圖片特效

【10款超JS圖片特效】相關(guān)文章：

特效設(shè)計崗位職責01-03

特效設(shè)計崗位職責9篇01-03

特效設(shè)計崗位職責(9篇)01-03

變焦特效的10個拍攝技巧分享03-06

特效設(shè)計崗位職責集合9篇01-03

特效設(shè)計崗位職責集錦9篇02-14

特效設(shè)計崗位職責(匯編9篇)01-03

超燃超正義的正能量短句11-06

三觀超正超干凈的文案05-09

三觀超正超干凈的文案15篇05-12