跨浏览器图片灰度效果

灰度效果是一个常用的效果,在WEB开发的过程中,这个效果有以下几种实现方式:

1 准备两张图片,一张正常,一张灰度,通过Javascript进行交互控制

2 在IE浏览器中可以使用滤镜参数将图片灰度 

element.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

3 在支持canvas的浏览器中,可以通过canvas的context进行动态设置:获取每个像素点的值,然后根据灰度的算法,将颜色转换成灰度

除了第一种方式,那么跨浏览器的灰度效果只能结合2和3.这里推荐一个Javascript脚本,使用起来很方便:

var myImg = document.getElementById('myImg');
myImg.onmouseover = function() {
	grayscale(this);
};
myImg.onmouseout = function() {
	grayscale.reset(this);
};

在线DEMO 里已经引用了该脚本.


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值