[DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
来源:互联网 发布:淘宝店铺流失商品 编辑:程序博客网 时间:2024/05/28 18:44
本文主要是利用CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节。
CSS filter我们首先来探讨一下filter。
首先来说明一下filter,在CSS里面要实现filter,其实很简单,使用类似下面的声明方式:
比如说,我们给图片添加一点灰度(grayscale)特效,就可以这样:
当然,为了浏览器兼容,我们最好这样写:
需要注意的是:filter的属性值的单位通常可能是从0到1之间,但是有些不是这样的,比如blur是使用像素'px'来作为单位的,而hue-rotate则使用角度deg来作为基本单位;
但是如果每次只能使用一个filter就比较麻烦了,所以CSS提供了更加方便的书写形式,直接并排着写:
这样就可以实现对一个元素添加多个filter属性。
简单地说完filter之后,我们来动手创建一个简单的图片编辑器。
创建基本的HTML文件在这里我们创建一个index.html,代码也比较简单:
这个文件里,我们引入了main.css和main.js,main.css其实是对编辑器的一些排版起的作用,并没有对图片的filter效果做出实际的影响,我们做的是编辑器,所以在用户改变某个filter的值的时候,我们可以实时让用户看到效果,于是这些实现filter的代码应该就放在main.js里面。
上面的每一个
1 0
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
- js+Css实现的一个简单对话框
- 用 JS+CSS 打造一个惟妙惟肖的网页版苹果工具条
- 这次做div+css网站用的一个CSS HACK
- css打造图片转动
- 图片切换(一)(div+css+js)
- 图片切换(二)(div+css+js)
- 简单的DIV+CSS布局
- 一个DIV+CSS代码布局的简单导航条
- 一个简单的网站布局(div+CSS)
- 这是一个简单的图片时间器;使用html+css+js,合适新手练习
- 一个CSS+DIV的demo
- DIV+CSS编辑器
- CSS+JS打造带渐变的进度条
- CSS 控制DIV及图片的宽度和高度
- css+div和table+css的比较
- 用css定义一个div,如何用js取得样式的属性呢?
- 用DIV+CSS实现图片行和列排版
- GitHub 版本配置 详细教程
- Spark Executor Driver资源调度小结
- BestCoder Round #74
- Java异常相关的面试题(上)
- 答答租车系统
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
- eclipse 连接 cdh5.5 插件
- 动态加载Dll时,通过Type生成类对象
- 递归实现字符串反向输入
- js中报错:$ is not defined
- 谁将会参加比赛的问题(java 实现)
- DataTemple-创建数据模板
- Nginx反向代理和负载均衡部署指南
- 移动端H5各种各样的列表的制作方法(三) by FungLeo