最近做项目需要使用到让用户自定义颜色,Google了一把,居然网上已经有现成的jquery插件 colorpicker实现。
官方地址:http://www.eyecon.ro/colorpicker/
但是,在IE6下,当拖动滚动条滑动时,左侧的面板不能同步更新。
查看页面效果及源代码,发现作者的解决思路很是巧妙:使用http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png 作为背景图,然后将定位滚动条位置的颜色值取出后,算出RGB后,传给左侧区域,两个背景图一叠加,显示出来就是渐变的效果了。
但是ie6不支持多背景图,问题出现了。
这时,我们换个思路就可以解决了:通过ie6的滤镜,支持png透明,这时,再在上面添加颜色重叠。
修改colorpicker.css
第20行:
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(../images/colorpicker_overlay.png);
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.eyecon.ro/colorpicker/images/colorpicker_overlay.png", sizingMethod="scale");
}
ok,解决。 :)
个人认为,写colorpicker的童鞋一定是搞设计的,不然做不出来这样一张渐变的png图片,颜色一重叠就是想要的效果。看来程序员了解下色彩学还是很有必要的。HoHo~~