Posted by: Phodal Huang Oct. 22, 2013, 11:48 p.m.

听闻淘宝有了自己的蛋，于是赶忙就先复制一下，看看是怎么工作的，最后也就有了自己的彩蛋

Phodal's Egg

至于用法，打开淘宝首页，

至于原因你运行一下就会知道个大概了~~，css3各种特效轮换，对于我等苦逼的学生来说。

基本组成

Chrome Console.log

先弱弱的了解了一下，右键页面-》审查元素-》console，然后就会有我们想要的东西了。

自己的版本就用了这个库:https://github.com/adamschwartz/log

按照原文来说就是

Console.log with style

Thanks To Taobao UED --Phodal log.js:19 用法(usage):

log.js:19 输入FP.egg() and Enjoying it ！

要做这样效果的代码，只需要下面的几句话

    log('[c="font-family: \'Helvetica Neue\', Helvetica, Arial, sans-serif; color: #fff; font-size: 20px; padding: 15px 20px; background: #444; border-radius: 4px; line-height: 100px; text-shadow: 0 1px #000"]Thanks To Taobao UED  --Phodal[c]');

    var codeStyle = 'background: rgb(255, 255, 219); padding: 1px 5px; border: 1px solid rgba(0, 0, 0, 0.1)';  
    var bold = 'font-weight: bold';  
    var italic = 'font-style: italic';  
    var testHeaderStyle = 'font-weight: bold; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #444; padding: 8px 0; line-height: 40px';  
    var testNumber = 1;

    log.l('用法(usage):');  
    log.l('%c输入FP.egg() and Enjoying it ！%c','', bold, '');

所以，我们也就知道怎么进入淘宝彩蛋的方法了

打开console，输入

FP.egg()

至于为什么是这么叫的话，那我就不是很了解了~~，不知所云，好想改成TP.egg()，然后放到

http://gmszone.github.io/DataVisual/

所以，让我们开始体验一下TP.EGG()

FP.EGG() TO TB.EGG()

打开 http://gmszone.github.io/DataVisual/

看上去和淘宝的首页一样都很正经，然后，然后。。。打开Conlose。 于是。。。CSS3的无力，让我把他改成了

TB.egg()

于是乎，git到源码后只需要改下面的东东。

index.html  
tb------------  
   --launch.js

无关的代码已经被删了一部分，但是没有删完。我们也就看到了另外一个神奇的东西KISSY(转载自Phodal's Blog)

KISSY

官网:http://docs.kissyui.com/

是这么说的

KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架。它具备模块化、高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等特性。

好像是这样子的，看到

editable

editable����

后，我想我还是继续使用jQuery+Bootstrap。

要是可以增强CSS的美化的话，我想TB会走在前面的，只是实在是不敢恭维。

因为里面主要是用kissy，那么就先不动这些代码了

LET'S TB.egg()

git push -u origin master

主要写在

launch.js  
eggs-min.js

修改launch.js

/*pub-1|2013-09-26 16:06:20*/  
KISSY.ready(function(k) {  
    var s, b, o, r, f = k.getScript, a = k.UA, n = window, q = n.TB, i = null, l = 700, j = "./tb/", p = "console", m = "border:#444 1px solid;padding:3px 5px;", g = ["background:url(http://gtms01.alicdn.com/tps/i1/T1V_S9FcdXXXc0qR2k-184-40.png) no-repeat;padding:15px 90px;line-height:30px", "background:#444;border-radius:4px 0 0 4px;font-weight:bold;color:#fff;" + m, "border-radius:0 4px 4px 0;line-height:30px;color:#aaa;" + m];  
    s = [  
        "./tb/T1f2eZFdXcXXbDMVvh-200-40.gif",   
        "./tb/T1hYy6FlRXXXcTIC.G-539-361.png",   
        "./tb/T1ycKPFoBeXXa9W8sK-225-225.png",   
        "./tb/T1dMK2FX0dXXcfmpzl-19-205.png",   
        "./tb/T1Gea4FkVdXXcnw9_I-400-379.png",   
        "./tb/T1FKW5Fk4cXXXbVN7b-523-263.jpg"];  
    b = j + "eggs.css";  
    o = j + "eggs-min.js";  
    function d() {  
        r = 1;  
        f(o, function() {  
            setTimeout(function() {  
                i.hide().height(0)  
            }, 200)  
        })  
    }

    function e(c, h) {  
        window.scrollTo(0, 0);  
        if (!i) {  
            i = c('<div></div>');  
            c("body").prepend(i)  
        }  
        i.show().animate({  
            height : Math.max(l, c(n).height())  
        }, 0.5, "easeOutStrong", !h ? null : function() {  
            setTimeout(function() {  
                i.hide().height(0)  
            }, 5000)  
        })  
    }  
    q &amp;&amp; k.use("node", function() {  
        q.egg = function(c) {  
            if (a.ie &amp;&amp; a.ie &lt; 9) {  
                return e(k.all, 1)  
            }  
            e(k.all, 0);  
            setTimeout(function() {  
                r ? d() : (k.each(s, function(h) {  
                    (new Image()).src = h  
                }), f(b, d))  
            }, 2000);  
            if ( p = n[p]) {  
                if (a.chrome) {  
                    p.log("%c", g[0]),   
                    c &amp;&amp; p.log(c, g[1] + "padding:3px 8px;"),   
                    p.log("%cued blog%chttp://ued.taobao.com/", g[1], g[2])  
                } else {

                    p.log(c.replace(/%c([^%]+)%c(.+)/, "$1: $2"))  
                }  
            }  
        }  
    })  
});

时间是2013-09-26，修改q=n.TB就可以自由修改这个名字了。 最简单的方法就是在

q && k.use("node", function() {

里面添加一个新的函数就可以玩了，不过，感觉这东西玩玩还可以。。。 不适合用于生产