html5 彩蛋动画,egg.js-趣味复活节彩蛋js插件

Egg.js是一款非常有趣的复活节彩蛋js插件。该复活节彩蛋插件可以监控用户的键盘输入，当用户输入正确的字母序列的时候，复活节彩蛋会打开，在页面中显示你意想不到的内容。

十二世纪时，人们在复活节节庆中加入鸡蛋，此蛋多涂以红色，也有绘成彩色和笑脸。故一般称之为“复活节彩蛋”(一般也称为复活蛋)。蛋的原始象征意义是为“春天—新生命的开始”。基督徒则用来象征“耶稣复活，走出石墓”。复活节彩蛋是复活节里最重要的食物象征，意味着生命的开始与延续。如今的彩蛋花样繁多，形式各异，如镂空的蛋雕一般亦可归入广义的彩蛋之列。

——百度百科

HTML结构

使用该复活节彩蛋插件先要引入egg.js文件。

然后你可以使用addCode()方法来在复活节彩蛋中添加字母序列。用户需要输入这个正确的字母序列来触发复活节彩蛋。字母序列可以使用Javascript key codes，或者直接使用英语。你还可以在复活节彩蛋触发时为它添加一个metadata，这个metadata可以是字符串或任何对象。

var egg = new Egg();

egg

.addCode("up,up,down,down,left,right,left,right,b,a", function() {

jQuery('#egggif').fadeIn(500, function() {

window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);

}, "konami-code");

})

.addHook(function(){

console.log("Hook called for: " + this.activeEgg.keys);

console.log(this.activeEgg.metadata);

})

.listen();

你也可以使用构造函数来调用复活节彩蛋。

var egg = new Egg("up,up,down,down,left,right,left,right,b,a", function() {

jQuery('#egggif').fadeIn(500, function() {

window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000);

}, "konami-code");

}).listen();

你还可以添加一个钩子(hook)，在复活节彩蛋被触发之后执行一些操作。这个钩子接收egg对象作为参数，你可以通过this.activeEgg来触发它。

查看DEMO，使用魂斗罗游戏中的无限复活密码：上上下下左右左右+BA来触发复活节彩蛋吧！