CSS filter 我们首先来探讨一下filter。 首先来说明一下filter,在CSS里面要实现filter,其实很简单,使用类似下面的声明方式:
比如说,我们给图片添加一点灰度(grayscale)特效,就可以这样:
当然,为了浏览器兼容,我们最好这样写:
需要注意的是:filter的属性值的单位通常可能是从0到1之间,但是有些不是这样的,比如blur是使用像素'px'来作为单位的,而hue-rotate则使用角度deg来作为基本单位;
但是如果每次只能使用一个filter就比较麻烦了,所以CSS提供了更加方便的书写形式,直接并排着写:
这样就可以实现对一个元素添加多个filter属性。 简单地说完filter之后,我们来动手创建一个简单的图片编辑器。 创建基本的HTML文件 在这里我们创建一个index.html,代码也比较简单:
上面的js代码也是写到main.js当中。有了可以用户自己添加图片之后,我们就可以实现对图片的编辑了: 每次用户在滑动进度条的时候,我们就可以将效果展示给用户看,于是我们来监听用户的mousemove事件:
也就是说,每次用户在移动控制条的时候,我们都执行editImage函数。 但是这样的体验可能还不是最好,因为在最后用户的鼠标离开控制条的时候,我们还可以监听change事件,把这一刻的变化也交给editImage函数处理,所以可以将上面的代码写成这样:
其实很简单,我们在每次用户滑动控制条的时候,我们就通过类似var gs = $('#gs').val();的语句取得相对应地值,然后通过Jquery的css()方法直接为图片加上filter效果,而且相信你也看得出来,这个函数的后半段就是实现浏览器兼容的 $('#imageContainer img').css('-webkit-filter',...) 复制代码 这段代码其实就是在img元素实现了类似下面的效果; [img=28,30][/img]
最后,如果你不想将某些特效加到图片上面去,你可以点reset然后将图片重置到原始状态:
这里需要说明一下的是,这里的setTimeout函数就是为了将reset的效果最快地展现出来,如果写成下面的形式:
这个时候,reset效果执行起来其实是有一点延迟的,你明显可以看到等待的时候,它并不是很快。 浏览器打开index.html,就可以看到相应的调节效果了。你可以拖动一些设置项的控制条来查看效果。