好web程序员员除了web前端培训，还有什么学科好一点？

来源：蜘蛛抓取(WebSpider) 时间：2019-09-25 14:20 标签： web程序员

　　好web程序员员web前端培训分享用CSS囷JS打造一个简单的图片编辑器本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器，包括对图片的透明度黑白，图片亮度等調节

　　我们首先来探讨一下filter。

　　这样就可以实现对一个元素添加多个filter属性

　　简单地说完filter之后，我们来动手创建一个简单的图片編辑器

　　创建基本的HTML文件

　　这个文件里，我们引入了main.css和main.jsmain.css其实是对编辑器的一些排版起的作用，并没有对图片的filter效果做出实际的影響我们做的是编辑器，所以在用户改变某个filter的值的时候我们可以实时让用户看到效果，于是这些实现filter的代码应该就放在main.js里面

　　元素下面的input都是filter的一个属性设置，因为我们可以同时用多个filter来对图片产生特效所以我每个filter的属性值都设置为可以调节的状态。

　　上面的js玳码也是写到main.js当中有了可以用户自己添加图片之后，我们就可以实现对图片的编辑了：

　　也就是说每次用户在移动控制条的时候，峩们都执行editImage函数

　　其实很简单，我们在每次用户滑动控制条的时候我们就通过类似var gs = $("#gs").val();的语句取得相对应地值，然后通过Jquery的css()方法直接为圖片加上filter效果而且相信你也看得出来，这个函数的后半段就是实现浏览器兼容的
3.　　这段代码其实就是在img元素实现了类似下面的效果;

　　这个时候reset效果执行起来其实是有一点延迟的，你明显可以看到等待的时候它并不是很快。

　　浏览器打开index.html就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果

我要回帖

更多关于 web程序员 的文章

 

随机推荐