jQuery colorpicker和CSS3渐变
|
我有一个关于CSS3渐变的问题，还有一个用于jQuery的名为颜色选择器的插件，
我想要实现的是用户可以将图像的背景更改为他们选择的渐变；我尝试了多种解决方案，但似乎无法使渐变部分正常工作。
这是开发版本：http://prosperitymedia.co.uk/pm/logo.html
这是颜色选择器：http://www.eyecon.ro/colorpicker/
请注意，我仅在FF4中测试了开发版本，因此我不确定它是否可以在其他浏览器中使用。
这是我的代码：
// initial colour value
var gradientHexOne = \'333333\';
var gradientHexTwo = \'666666\';
$(\'#logo_gradient_1_colorSelector\').ColorPicker({
color: \"#\" + gradientHexOne,
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
// every time a new colour is selected, this function is called
gradientHexOne = hex;
$(\'#logo_gradient_1_colorSelector div\').css(\'backgroundColor\', \'#\' + hex);
}
});
$(\'#logo_gradient_2_colorSelector\').ColorPicker({
color: \"#\" + gradientHexTwo,
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
gradientHexTwo = hex;
$(\'#logo_gradient_2_colorSelector div\').css(\'backgroundColor\', \'#\' + hex);
}
});
$(\'#gradients\').click(function(){
$(\'#logo\').css(
\'-moz-linear-gradient(100% 100% 90deg,\' + \'#\' + gradientHexOne + \', #\' + gradientHexTwo + \')\'
);
});
没有找到相关结果
已邀请:
1 个回复
念炯
是背景图像值，例如$(\'#logo\').css({\'background-image\' : \'-moz-linear-gradient(100% 100% 90deg,\' + \'#\' + gradientHexOne + \', #\' + gradientHexTwo + \')\'});