- 相关推荐
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的滤镜完成，“filters.alpha.opacity”用来设置图片的样式，通过不断增加或减少图片的透明度实现淡出淡隐效果。
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