Javascript实现渐变褪色淡入淡出效果fat.js
本文最后更新于 6065 天前,其中的信息可能已经有所发展或是发生改变。

在wordpress的效果代码中有一个fat.js文件,fat也就是The Fade Anything Technique 褪色技术

其作用是可以根据你指定的颜色按照一定的规则显示出渐变的褪色淡入淡出效果,用户ajax的审核评论,审核文章很是好用,而我们需要做的只是给需要效果的元素设置ID和ClassName.简单容易吧

代码如下,作者的官方站点我上不了了,需要的最好下个wordpress去找下里面的js文件

var Fat = {
    make_hex : function (r,g,b)
    {
        r = r.toString(16); if (r.length == 1) r = '0' + r;
        g = g.toString(16); if (g.length == 1) g = '0' + g;
        b = b.toString(16); if (b.length == 1) b = '0' + b;
        return "#" + r + g + b;
    },
    fade_all : function (dur)
    {
        var a = document.getElementsByTagName("*");
        for (var i = 0; i < a.length; i++)
        {
            var o = a[i];
            var r = /fade-?(\w{3,6})?/.exec(o.className);
            if (r)
            {
                if (!r[1]) r[1] = "";
                if (o.id) Fat.fade_element(o.id,null,dur,"#"+r[1]);
            }
        }
    },
    fade_element : function (id, fps, duration, from, to)
    {
        if (!fps) fps = 30;
        if (!duration) duration = 3000;
        if (!from || from=="#") from = "#FFFF33";
        if (!to) to = this.get_bgcolor(id);

        var frames = Math.round(fps * (duration / 1000));
        var interval = duration / frames;
        var delay = interval;
        var frame = 0;

        if (from.length < 7) from += from.substr(1,3);
        if (to.length < 7) to += to.substr(1,3);

        var rf = parseInt(from.substr(1,2),16);
        var gf = parseInt(from.substr(3,2),16);
        var bf = parseInt(from.substr(5,2),16);
        var rt = parseInt(to.substr(1,2),16);
        var gt = parseInt(to.substr(3,2),16);
        var bt = parseInt(to.substr(5,2),16);

        var r,g,b,h;
        while (frame < frames)
        {
            r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
            g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
            b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
            h = this.make_hex(r,g,b);

            setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);

            frame++;
            delay = interval * frame;
        }
        setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
    },
    set_bgcolor : function (id, c)
    {
        var o = document.getElementById(id);
        o.style.backgroundColor = c;
    },
    get_bgcolor : function (id)
    {
        var o = document.getElementById(id);
        while(o)
        {
            var c;
            if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
            if (o.currentStyle) c = o.currentStyle.backgroundColor;
            if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
            o = o.parentNode;
        }
        if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
        var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
        if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
        return c;
    }
}

addLoadEvent(function ()  {
    Fat.fade_all();
});

评论

  1. 15年前
    2008-9-29 22:10:56

    怎么不解释的详细一点呢?再加一个使用说明什么的。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇