javascript - 用于文本渐变的 jQuery 插件

Question

我有一个嵌入字体的文本，它必须有一个垂直渐变，你能为它提供一个 jQuery 插件吗？我需要保留字体系列、大小和其他属性，并且只添加垂直渐变。

我找到了一个 ( http://www.codefocus.ca/goodies/gradienttext ) 但它覆盖了我所有的字体。

Answer 1

是的，你可以

只需调用 css() 方法再次应用字体

首先，您为什么不在一个 READY 函数中编写这两种代码？

其次，解决方案(可能是:)

jQuery(document).ready(function($){ // yup, I like to use it this way - safe

    var test1Opts = {
            colors: ['#FFF', '#EB9300'],
            style: 'vertical',
            shadow:             true,
            shadow_color:       '#000000',
            shadow_offset_x:    1,
            shadow_offset_x:    1,
            shadow_blur:        1
        },
        test2Opts = {
            colors: [
                '#FF0000',
                '#FF6600',
                '#CCFF00',
                '#00FF00',
                '#0066FF',
                '#FF00FF'
            ],
            style: 'horizontal'
        }

    $('#test1')
        .gradienttext(test1Opts)
        .css('font-family', 'YOUR CUSTOM FONT NAME')
    //  optionally you can call the following to apply font on all child items
    //  by uncommenting the 2 lines below
    //  .find('*')
    //  .css('font-family', 'YOUR CUSTOM FONT NAME');

    //  you can also use the short "font" syntax, 
    //  if you have a lot of options in your font-face

    $('#test2')
        .gradienttext(test2Opts)
    //  .css('font', 'style weight size/line-height YOUR CUSTOM FONT NAME')
        .css('font', 'normal bold 11px/16px YOUR CUSTOM FONT NAME')
        .find('*')
        .css('font-family', 'YOUR CUSTOM FONT NAME');
});