Blog

Blog

PHODAL

淘宝彩蛋--CSS3,Console彩蛋指南

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

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() {
里面添加一个新的函数就可以玩了,不过,感觉这东西玩玩还可以。。。 不适合用于生产


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签