在百度搜索"2012世界末日"所展现的地震效果的源代码
昨天在同学群里收到这样的信息：【重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 】。很想看看百度的前端工程师是怎么写出这个效果的。以前我研究过谷歌logo的代码，特别是昨天的拉链效果，虽然找到了源码，但是谷歌的页面里的代码都被压缩和混淆，加上谷歌自己的前端js框架代码混入其中实在难以看懂，抽百度的源码就想比较下百度和谷歌的前端技术，哈哈，百度还是简单多了，没有被压缩和混淆，可以作为学习的范本，好了不废话了，下面就是百度的地震效果源码。
首先看看我代码的目录层次图：
all.png：
url:http://s1.bdstatic.com/r/www/cache/2012cp/images/all.png
broken.png:
url:http://s1.bdstatic.com/r/www/cache/2012cp/images/broken.png
ticket.jpg:
url:http://s1.bdstatic.com/r/www/cache/2012cp/images/ticket.jpg
baiduquake.js源码如下：
View Codebaiduquake.html源码如下：
View Code对前端技术感兴趣的童鞋可以好好研究下哈！！！！！！
下载源代码，请点击下面链接：
分类: javascript
javascript
摘要: 我发现童鞋们对百度的技术很感兴趣哦，呵呵，大型互联网公司真是聚集牛人的地方，不过我感觉和google比起来（看他们网站的源码），google的网页的代码比百度更加复杂，我以前觉得google什么都是开源，什么都会和大众们进行分享，但是它要是不想分享，代码还真是难读。看来看去觉得还是谷歌厉害。 这里想把百度的地震效果嵌入到我的博客里~~~~~，大家好好体验下哈哈~~~~~~~~~~~~~~~~~~~~~~~~阅读全文
摘要: 最近研究了一些在线支付网站的前端代码，在看易宝支付的商户接入网站时候发现他们使用的javascript小键盘很不错。在前端页面通过鼠标输入字符、密码可以防止黑客通过记录你点击键盘的按钮窃取你的重要信息，这里将易宝支付的小键盘组件和大家分享下。 首先还是页面的目录结果，如下图： 页面最终的效果如图所示： vkboard.js的代码：View Code var _default_img_dir = 'js/';var vbk_images=new Array();function vbk_preloadimages(){ if (document.images){ ...阅读全文
摘要: 昨天在同学群里收到这样的信息：【重磅消息：只要在百度搜索"2012世界末日"，你的电脑显示器页面将会震动，出现地震山摇的状况，然后会有一张"船票"飘然而出 】。很想看看百度的前端工程师是怎么写出这个效果的。以前我研究过谷歌logo的代码，特别是昨天的拉链效果，虽然找到了源码，但是谷歌的页面里的代码都被压缩和混淆，加上谷歌自己的前端js框架代码混入其中实在难以看懂，抽百度的源码就想比较下百度和谷歌的前端技术，哈哈，百度还是简单多了，没有被压缩和混淆，可以作为学习的范本，好了不废话了，下面就是百度的地震效果源码。 首先看看我代码的目录层次图：all.png：阅读全文
摘要: 上篇文章里我结束了对象的创建的内容，最后引出了作用域链和执行环境的问题。当我对这块知识有了更深入的了解后，回头看看jQuery源码才知道大师们写的代码是如何的厉害，jQuery源码里很好的运用了作用域链和执行环境的知识来提升程序性能。 好了，不废话了，上篇博文里对作用域讲的比较简略。其实对作用域的理解是理解整个javascript语言的关键所在，特别我在写javascript笔记时候曾对很多怪异的javascript用法无法理解的透彻，究其原因还是没有真正理解javascript里作用域的概念。 Javascript里的作用域到底决定了什么呢？作用域决定了那些变量能被函数所访问（注意：...阅读全文
摘要: 为什么现在主流程序语言里我们都要创建对象了？下面这个定义我想能给我们一个答案： 面向对象语言里对象的定义是：对象是人们要进行研究的任何事物，从最简单的整数到复杂的飞机等均可看作对象，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。抛开这些抽象的定义，从计算机底层技术来理解，对象其实就是一种存储数据的方式。 写这个系列下篇着实让我犯难了，本来我想写闭包和原型的，但是总觉得不好，在和一位以前同事讨论javascript技术时候他告诉我们在计算机语言里不管是什么样的变量其实本质都是数据在计算机的存放方式了，程序就是数据和运算组成的，他说我既然在学习javascript对象的创建，那么...阅读全文
摘要: 深入分析javascript里对象的创建这个小系列是我整个博客里最受欢迎的文章，有博友催我把下篇写完，昨天和今天整理资料发现一篇文章还真讲不完我下半部分的内容，所以把本来打算写的下篇分成两部分了。 本主题的上篇里我讲到了三种对象创建的方式，最后通过类比java面向对象的思想反过来理解javascript对象的创建。如果根据标题的核心对象的创建，我所阐述的问题其实已经讲完，但是我写完上篇时候总觉得欠缺点啥，欠缺我的标题里面的深入分析二字。小小的创建一个javascript对象它所包含的技术的延伸面是极其宽泛的，到了实际开发时候没有一定发散的知识的积累我们想还会碰到难以理解的问题，中篇和下篇...阅读全文
摘要: 读jQuery源码时候，我常想到底那些因素会让我读不懂代码，其中最关键的是哪个，最早觉得是jQuery的架构设计，当我查阅资料终于找到jQuery架构设计的入口时候，我发现javascript基础语法的熟练运用才是读源码的关键，因此现在把javascript基础知识系统回顾下很有必要，而且jQuery源码的研究就是对javascript基础知识的加深和灵活运用，我想后面临摹jQuery将和我对ja...阅读全文