Блог

У меня есть вопрос относительно CSS3 градиентов и плагина для jQuery под названием color picker,

Чего я пытаюсь добиться, так это того, что пользователь может изменять фон изображения в соответствии с выбранными им градиентами; я перепробовал несколько решений, но, похоже, не могу заставить работать градиентную часть.

Вот версия для разработки: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   ')'
        );
    });
  

-moz-linear-gradient является значением фонового изображения, например

 $('#logo').css({'background-image' : '-moz-linear-gradient(100% 100% 90deg,'   '#'   gradientHexOne   ', #'   gradientHexTwo   ')'});