jQuery常用的图片滤镜

一款jQuery常用的图片滤镜特效，演示里面有多种图片的滤镜特效，并有原图的效果进行对照，另外，滤镜的参数可以自由设置。

分类：图片代码 > 图片插件难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入页面元素的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/base.css">

页面的body部分，需设置好滤镜效果的容器，部分代码如下：

<div class="container">
	<!-- 原图展示区域 -->
	<p class="titleP">图片滤镜系列</p>
	<p class="titleP" style="font-size: 16px;">------ 超级简单和轻量级，仅需引入一个js ------</p>
	<div class="itemDiv">
		<div class="leftDiv">
			<img src="img/1.png">
		</div>
		<div class="rightDiv">
			<pre>

原图展示
			</pre>
		</div>
	</div><br>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++灰度滤镜++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
	<p class="titleP">灰度滤镜 [0-100]</p>
	<!-- 第一部分:灰度滤镜 25% -->
	<div class="itemDiv">
		<div class="leftDiv">
			<img src="img/1.png" class="gray_25">
		</div>
		<div class="rightDiv">
			<pre>

标签: < img src="img/1.png" class="gray_25" >

要求: 灰度25%

调用: $(".gray_25").grayImg(25);
			</pre>
		</div>
	</div>
	<!-- 省略部分演示代码-->
	<div class="itemDiv">
		<div class="leftDiv">
			<img src="img/1.png" class="saturate_500">
		</div>
		<div class="rightDiv">
			<pre>

标签: < img src="img/1.png" class="saturate_500" >

要求: 饱和度500%

调用: $(".saturate_500").saturate(500);
			</pre>
		</div>
	</div>	
	<p class="titleP">到底啦</p><br><hr><br>
</div>

页面的底部，需引入jQuery库和滤镜插件，并设置好滤镜效果的相应参数，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
/*灰度滤镜*/
$(".gray_25").grayImg(25);
$(".gray_50").grayImg(50);
$(".gray_75").grayImg(75);
$(".gray_100").grayImg(100);
/*模糊滤镜*/
$(".dim_50").dim(0.5)
$(".dim_100").dim(1)
$(".dim_200").dim(2)
$(".dim_300").dim(3)
$(".dim_500").dim(5)
/*亮度滤镜*/
$(".brightness_25").brightness(25);
$(".brightness_60").brightness(60);
$(".brightness_125").brightness(125);
$(".brightness_200").brightness(200);
//对比度
$(".contrast_25").contrast(25);
$(".contrast_50").contrast(50);
$(".contrast_200").contrast(200);
//色相旋转
$(".hueRotate_50").hueRotate(50)
$(".hueRotate_100").hueRotate(100)
$(".hueRotate_200").hueRotate(200)
//饱和度
$(".saturate_50").saturate(50);
$(".saturate_100").saturate(100);
$(".saturate_200").saturate(200);
$(".saturate_500").saturate(500);
</script>