给你的网页埋上彩蛋


彩蛋这玩意,新意不论,趣味性倒是颇高。简单几行代码,埋一个复活节彩蛋,待读者蓦然回首或是制作者主动爆料,或许便是一个很好的口碑宣传。正好时下空闲,做了几个简单的彩蛋,代码都不超过十行,丢网页里也不会增加网页重量。

  1 yahoo首页式彩蛋

  这应该是最有名的一个菜单了吧,点击yahoo首页上面logo里面的感叹号,会有很亢奋的“yahoooooo”呐喊。

  yahoo这个彩蛋实现的比较复杂,主要在于他是对图片中的一部分做点击特效。

  剽窃创意,做一个山寨彩蛋就简单多了,譬如我的网页下面有这么 一条:“Copyright◎ 2002 xxxx, All rights reserved”,给其中一个单词加一个标签附上onclick效果,一个简单版的yahoo彩蛋就制作完毕。

  2 Amazon式彩蛋

  这个彩蛋也被介绍过很多遍,当高亮Amazon首页时,会看见一个隐藏链接(ps,现在还在没在就不知道了……) 。这个效果挺好玩的,使用者可能无意间ctrl+a就可以发现你的彩蛋。

  实现起来也很简单

  Html代码

<span><font color="#F0F0F0" size="2"face="Arial, Helvetica, sans-serif">http://unbounder.javaeye.com</font></span>

  思路大体类似,用与背景颜色相同的文字即可。

  3 greader的魂斗罗彩蛋

  google的彩蛋不计其数,不过greader那个魂斗罗彩蛋想必大家都听说过吧,就是在greader界面下输入魂斗罗30条命秘籍,ui会有一些很有趣的改变。

  这个实现也不难,我基于jquery写了一个

  Js代码  

var keyboard=[]; 
var begin=function(){ 
// console.info("aaa"); 
 $("#leftbottom").show(); 
}; 
var end = function(){ 
 keyboard=[]; 
 $("#leftbottom").hide(); 
}; 
$(document).keydown(function(e){ 
 keyboard.push((e||event).keyCode); 
// console.info("keys:"+keyboard); 
 if((keyboard+'').indexOf('38,38,40,40,37,37,39,39,65,65,66,66')+1){ 
 begin(); 
 setTimeout(end,5000,keys=[]); 
 } 
}); 

  其中$("#leftbottom")是我希望在输入“上上下下左左右右aabb”后希望显示的内容

  当然不用框架也非常容易实现,只是元素选择时稍微有点麻烦。

  ---------------------------------------------------

  这里不过简单分享下彩蛋的制作,基本思路辅以一些稍微复杂的flash元素,就能做出很炫的彩蛋应用


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3