淘宝彩蛋--CSS3、Console、web彩蛋指南

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

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

至于原因你运行一下就会知道个大概了~~，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 ！

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

	<script>
		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, '');
	</script>

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

打开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 style="background:#f1eddf url(' + s[h] + ') no-repeat center center;width:100%;height:0px;position:absolute;left:0;top:0;z-index:999999"></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 && k.use("node", function() {
		q.egg = function(c) {
			if (a.ie && a.ie < 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 && 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() {

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

不适合用于生产