10款超实用的JS图片特效

在网页中可以通过CSS滤镜改变图片的显示方式，下面这个例子就是通过JS如何实现图片的变形效果。 本例的重点是css中“filter”滤镜的使用，“wave”属性表示以波浪的形式显示图片。 参数的说明如下：·Add：一般为1或0；·Freq：变形值；·Lightstrength：变形百分比；·Phase：角度变形百分比；·strengm：变形强度。

具体代码如下：       

这是图片的变形效果

图片既可以通过滤镜也可以通过Photoshop进行特殊处理。本例介绍如何利用css的filter实现图片翻转。 本例的重点是CSS滤镜“filter：flipV”。“flipV”表示垂直翻转图片，如果修改为“flipHs”则表示水平翻转图片。

具体代码如下：       

这是图片的翻转效果

很多网站中图片的模糊效果使用Photoshop完成，其实CSS同样提供了实现模糊效果的虑镜。本例学习如何实现图片的模糊效果。 本例的重点是CSS的滤镜“filter：blur”，其中“blur”的语法如下所示：各参数的说明如下：·Add：一般为l或o；·Direction：角度，0～315度．步长为45度；·Strength：效果增长的数值．一般取5即可。

具体代码如下：       

这是图片的模糊效果

图片的水印效果通过设置样式的透明变实现。本例以具体实例介绍如何将图片设置为水印样式。 本例的重点是CSS的“ofilter”滤镜效果：“alpha”用来设置透明层次，其使用语法如下所示： 各参数的说明如下：·Opacity：起始值，取值为0～100，0为透明，100为原图;·FinishOpacity：目标值；·Style：1、2或3；·StartX：任意值；·StartY：任意值。

具体代码如下：       

这是图片的水印效果

图片的透明度可以让图片具有特殊的效果。本例学习如何利用图片的透明特性实现淡出淡隐效果。 本例的重点是图片的透明度属性“opacity”。此属性在本例中通过CSS的滤镜完成，“filters．alpha．opacity”用来设置图片的样式，通过不断增加或减少图片的透明度实现淡出淡隐效果。

具体代码如下：

单独实现一个图片的显示和隐藏比较容易，本例将介绍如何实现多个图片连续播放的效果，并在图片切换的时候使用逐渐消隐的特效。 本例的重点是滤镜结合定时器的使用。用滤镜“filter.alpha”实现图片的渐隐渐现，然后使用定时器“setTimeout”实现图片数组的调用。

具体代码如下：

在Word文档的制作过程中经常会遇到图片和文字都存在的情况，为了版面更合理通常需要特殊的效果，如文字环绕图片。本例就学习如何使文字环绕图片。 本例的重点是样式表中的“clear”：在一个大容器内如果定义了float元素(本例中img图片定义了float样式)，那么后面的元素会与其一起分享大容器剩下的宽度．如果既不想和float一起同行显示，又不想在浏览器中错位，那就得用到”clear：both”取消所有浮动。

具体代码如下：    

国家环保总局宣布今起松花江进入为期十年的“休养期”，并提出70条具体的治理措施，其中包括停止审批所有从松花江流域向外流域的调水工程,逐步淘汰松花江流域钢铁、电力、焦炭、造纸等行业的落后生产能力。