图片滤镜系列

------ 超级简单和轻量级，仅需引入一个js ------


原图展示

灰度滤镜 [0-100]


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

要求: 灰度25%

调用: $(".gray_25").grayImg(25);
				

< img src="img/1.png" class="gray_50" >

灰度50%

$(".gray_50").grayImg(50);
				

< img src="img/1.png" class="gray_75" >

灰度75%

$(".gray_75").grayImg(75);
				

< img src="img/1.png" class="gray_100" >

灰度100%

$(".gray_100").grayImg(100);

模糊滤镜 [0-n]


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

要求: 模糊50%

调用: $(".dim_50").dim(0.5);
				

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

要求: 模糊100%

调用: $(".dim_100").dim(1);
				

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

要求: 模糊200%

调用: $(".dim_200").dim(2);
				

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

要求: 模糊300%

调用: $(".dim_300").dim(3);
				

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

要求: 模糊500%

调用: $(".dim_500").dim(5);

亮度滤镜 [百分比]


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

要求: 亮度25%

调用: $(".brightness_25").brightness(25);
				

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

要求: 亮度60%

调用: $(".brightness_60").brightness(60);
				

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

要求: 亮度125%

调用: $(".brightness_125").brightness(125);
				

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

要求: 亮度200%

调用: $(".brightness_200").brightness(200);

对比度滤镜 [百分比]


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

要求: 对比度25%

调用: $(".contrast_25").brightness(25);
				

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

要求: 对比度50%

调用: $(".contrast_50").brightness(50);
				

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

要求: 对比度200%

调用: $(".contrast_200").brightness(200);

色相旋转滤镜 [0-n]


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

要求: 色相旋转50%

调用: $(".hueRotate_50").hueRotate(50);
				

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

要求: 色相旋转100%

调用: $(".hueRotate_100").hueRotate(100);
				

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

要求: 色相旋转200%

调用: $(".hueRotate_200").hueRotate(200);

饱和度滤镜 [0-n]


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

要求: 饱和度50%

调用: $(".saturate_50").saturate(50);
				

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

要求: 饱和度100%

调用: $(".saturate_100").saturate(100);
				

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

要求: 饱和度200%

调用: $(".saturate_200").saturate(200);
				

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

要求: 饱和度500%

调用: $(".saturate_500").saturate(500);

到底啦