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