長島冰茶的工程師筆記

終於把自己個人網站的文字特效寫成 jQuery Plugin 了，有需要的人可以自行取用哦

使用方法

$('#you_element').fontColorShow();

程式碼
https://github.com/fishingboy/Library/blob/master/jQuery-Plugin/jquery.font.color.show.js

特效展示
http://wbkuo.twbbs.org/demo/font_color_show.html
--

/**
 * 文字變色特效
 * @author Leo.Kuo
 */
(function($) 
{
    $.fn.fontColorShow = function()
    {
        // 初始化
        if (this.attr('color_0') == undefined)
        {
            this.attr('color_0', 0);
            this.attr('color_1', 0);
            this.attr('color_2', 0);
            this.attr('d_0', 1);
            this.attr('d_1', 1);
            this.attr('d_2', 1);
        }

        // 取得目前顏色
        var color = 
        [
            parseInt(this.attr('color_0')),
            parseInt(this.attr('color_1')),
            parseInt(this.attr('color_2'))
        ];

        // 取得顏色是遞增或遞減
        var d = 
        [
            parseInt(this.attr('d_0')),
            parseInt(this.attr('d_1')),
            parseInt(this.attr('d_2'))
        ];

        // 計算變換顏色
        for (var i=0; i<3; i++)
        {
            var rand = Math.ceil(Math.random() * 6 + 1);
            color[i] += d[i] * rand;

            if (color[i]<0 || color[i] > 255)
            {
                d[i] *= -1;
                color[i] += d[i] * rand;              
            }

            // 儲存顏色及遞增狀態
            this.attr('color_' + i, color[i]);
            this.attr('d_' + i, d[i]);
        }
        
        // 換顏色
        this.css({color:'rgb(' + color[0] + ',' + color[1] + ',' + color[2] + ')'});

        // 重複執行
        var jquery_obj = this;
        window.setTimeout(function()
        {
            for (var i=0, i_max=jquery_obj.size(); i<i_max; i++)
            {
                $(jquery_obj[i]).fontColorShow();
            }
        }, 100);
    };
})(jQuery);