JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

百度通告 2015-10-31

本文实例讲述了JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码。分享给大家供大家参考，具体如下：

这是一款JS模拟百度搜索“2012世界末日”网页地震撕裂效果，本效果是模仿用户在百度输入“2012世界末日”后点击搜索后出来的网页效果，网页在震动，像是地震了，而后开始撕裂，然后显示出相关的文字说明，很酷的效果，希望大家可以学习借鉴。

运行效果截图如下：

JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mn-2012-shake-style-demo/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2012世界末日</title>
<style type="text/css">
body{
 font-family:微软雅黑
}
.home-main{
 background:url(images/main_bg.jpg) center 0 no-repeat;
 width: 940px;
 height: 295px;
 margin: 0 auto;
 padding: 25px 30px 10px;
 position: relative;
 color: black;
 font-size: 14px;
 line-height: 30px;
 padding-left: 80px;
 margin-top: 100px
}
.home-main .grass {
 display: block;
 width: 89px;
 height: 149px;
 background: url(images/grass.png) 0 0 no-repeat;
 position: absolute;
 left: -17px;
 top: 30px;
}
.home-main .t{
 font-size: 18px;
 display: block
}
</style>
</head>
<body>
<div id="out">
 <div class="home-main">
  <span class="grass"></span>
  <span class="t">地球日百科地球 那些美好的生命</span>
  过去地球：这里曾经生活着很多独特而神奇的生命，霸王龙，剑齿虎……它们逐渐被地球所淘汰而消失。<br />
  但是，曾经也有很多美好的生命，渡渡鸟，恐鸟，因为人类的行为而消失；<br />
  我们也苦苦的找寻着白鳍豚、华南虎的身影，它们不见了……<br />
  现在地球：这里仍然生活着美好而灵动的生命，它们多姿而独特，它们顽强又脆弱。<br />
  熊猫、扬子鳄、树袋熊、鸭嘴兽、眼镜猴、懒猴、羊驼、虎鲸……因为它们和我们一起共存，我们才不孤独！<br />
  未来地球：它的命运，在你我手上。 沙漠化、温室效应、白色污染、过度放牧、大气污染、水污染……不要因为这些，让生命消失。 让地球上，只剩下人类孤独的生活着！
 </div>
</div>
<script type="text/javascript" src="2012.js"></script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

百度通告

百度通告

相关推荐

python绘制地震散点图

本项目是利用五年左右的世界地震数据，通过python的pandas库、matplotlib库、basemap库等进行数据可视化，绘制出地震散点图。主要代码如下所示。chi_provinces = ['北京','天津','上海','重庆','河北','山西'

星辰大海的路上 / 0评论 2019-06-18

本地备份不可靠 地震后如何保护数据安全

就在昨天5月12日14时28分，我国四川汶川发生7.8级地震，北京、上海、天津、陕西等多个省市震感明显，截至13日7时，四川等8省市共有9219人死亡。其实，在国外，异地容灾己普遍被企业所采纳和部署。在组建异地容灾方案之前，要选择有经验及一定技术实力的公司

featherli0 / 0评论 2009-04-20

新的人工智能系统现在可以成功预测地震

科学家们已经开发出一种人工智能系统，能够成功地预测地震，这可能有助于为自然灾害做好准备并可能挽救生命。该研究发表在《Geophysical Review Letters》杂志上，确定了一个导致地震的隐藏信号，并用这个“指纹”来训练机器学习算法预测未来的地

机器之心 / 0评论 2017-10-26

JavaScript 地震特效

小五 / 0评论 2009-11-25

HDU 2188 悼念512汶川大地震遇难同胞——选拔志愿者(巴什博弈)

悼念512汶川大地震遇难同胞——选拔志愿者Time Limit: 1000/1000 MS Memory Limit: 32768/32768 K Total Submission: 11433Accepted Submission: 7338. 对于四川

天生勇气 / 0评论 2018-05-24

地震之后一片狼藉? 但它依旧美如仙境。

我对九寨沟的景色就像仙境一般令人如痴如醉。大名鼎鼎的五彩池在大雨的情况下，会形成这样的景象。在这个“东边日出西边雨”的九寨沟里面，雨过天晴后的五彩池顿然间让牛奶丝状的东西顿然消散了，留下了非常清新而美丽的镜面效果的景观。这也是五彩池固有的、奇特的景观效果。

土木僧的写写画画 / 0评论 2018-01-21

月球800公里深处每27天发生一场地震, 难解之谜终被破解!

和地球一样，月球也有地壳、地幔和地核，但不同于地球的是，月球地表没有构造板块，而且月球内部的活动早已经停止，因而科学家们一直认为月球是一颗宁静的死亡星球，没有火山活动，也没有和地球地震一样的“月震”。研究人员认为，应该对月震活动进行更深入的研究，探索月球内

天文八卦学 / 0评论 2018-01-18

还没有地震之前, 九寨沟到底有多美?

九寨沟是从小就听父辈的亲戚说过无数遍的，还有那首来自于容中尔甲的“神奇的九寨沟”歌曲。“在离天很近的地方 ，总有一双眼睛在守望，她有着森林绚丽的梦想，她有着大海碧波的光芒"。那时候总感觉这首歌把九寨沟有点儿夸大其词，等自己亲眼游玩后，才发现这首歌

小道消息 / 0评论 2018-01-17

这座城市因摩天大楼盖得太多, 地面每年下沉约17厘米, 即将面临灾难

这可以说是印尼的经济中心，当地主要是以金融业发展为主。拥有国内最大的金融和主要工商业机构。专家研究表明，印尼首都雅加达一些地方每年下沉15--18厘米，大多数地区为3--5厘米，平均下来为7.5厘米。大量兴建的高楼大厦给雅加达的地面造成了沉重负担。由持续数

DavidsCorner / 0评论 2018-01-11

科学家: 磁悬浮房子只需五个电池, 地震时自动变成“飞行模式”!

日本列岛位于太平洋板块和亚欧板块交界处，这两个板块发生碰撞、挤压时，其交界处的岩层便出现变形、断裂，从而产生火山爆发或地震等现象。日本地震多发的原因是其地表下方有好几个板块在这里交汇。日本全国每年平均有1万多次地震，有感地震平均每天约有4次，5级以上的大地

中国科普博览 / 0评论 2018-01-11

乌龙一场! 日本地震警报齐鸣吓坏了正要开会的安倍

海外网1月5日电 当地时间5日11点02分，日本东京、茨城和福岛县等8都县发布了紧急地震速报。不过，后来日本气象厅承认，这次地震属于“误报”。日媒称，在新年伊始就发布“假情报”，让人们猝不及防，心脏都快吓裂了。不仅如此，连当时正准备开会的日本首相安倍晋三都

中国科普博览 / 0评论 2018-01-06

邻国地震, 中国马上援助3亿, 8年后其恢复过来, 立刻出兵打中国

中国有两句古话说得好，一句是“远亲不如近邻”，另一句是“一方有难，八方支援”。对于人与人之间的关系如此，对于国家与国家之间的关系更是如此。然而，在1923年9月1日，日本爆发关东大地震，损失惨重，作为邻国的中国马上援助3亿，但是8年后日本恢复过来之后，却立

世界说 / 0评论 2018-01-02

盘点6个极少人知晓的未解之谜，谁可以解答？

至今仍然无法解释1979年9月22日美国船帆座卫星显示的两道亮光。这两道亮光一直被猜测为核爆炸的典型亮光，但是最近解密的文件显示“尽管这像是核爆的信号，但这可能不是来自核爆炸。”美国空军在亮光显示之后的很短时间赶到那里但没有发现任何爆炸或放射迹象。这个事件

友心人 / 0评论 2018-01-01

注意! 地球自转减慢, 明年或爆发多起强烈地震

地震可能是地球上最危险的自然灾害，人类科学目前依然无法完全准确的预测地震，甚至连地震的基本成因都没有弄清楚。但就是在这117年的样本中，比尔曼发现，每当地球自转减慢的幅度加大时，就越容易发生大规模地震。种种迹象都显示2018年将会是地球更不稳定的一年，虽然

天文八卦学 / 0评论 2017-12-31

沉睡300年的日本富士山在积蓄能量, 若被地震唤醒, 将是灾难性的

日本领土由北海道、本州、四国、九州四大岛及7200多个小岛组成，总面积37.8万平方千米。日本气象厅采取二级警戒，呼吁方圆1公里范围内的民众注意防范岩石。2012年9月的观测结果显示，富士山的岩浆室压力已经增加到1.6兆帕斯卡，这个数值比它上一次喷发时还要

中国科普博览 / 0评论 2017-12-29

日本人为什么打起仗来不怕死? 难道仅仅是因为武士道精神

为什么日本人打仗不怕死，只是因为武士道精神吗？这与日本的地理位置有关：日本地处四个板块的交界处，地震和火山活动十分活跃。世界上每年发生的大小地震中，有约10%都是在日本附近发生。1996年到2005年期间，世界上发生的里氏6级以上的地震中，有20%都是发生

中国科普博览 / 0评论 2017-12-29

汶川大地震预测真相: 科学的悲歌

四川地震局有一个著名的老上访户，大名李有才。2003 年，紫坪埔水库刚开始建设，这个李“乌鸦”就说紫坪埔水库建在了“全新式活断层”上，这种地方建水库是最忌讳的。他大会讲，还上书国务院。朱总理转国家地震局处理。国家地震局认为此地历史上没有大地震，非常稳定。放

丁香医生 / 0评论 2017-12-24

科学家发现地球自转变慢将导致大地震时期的到来, 人类需警惕

众所周知地震是一种剧烈的地质运动，地震的发生往往伴随着泥石流、山体崩塌等灾难。然而，地球每天都会有5万人可以感受到地震，平均每年都有十几次7级大地震，500万次3级地震。那么，未来的2018年是否是一个地震频发的时期呢？其实，早在1996年英国团队就发表过

心理学哲学批判性思维 / 0评论 2017-12-20

科学家发现“氡”可以预测地震?

我们都知道地球外围包着大气层，这个大气泡里有氧气和其他气体。岩石圈则是地球的固体外层，包括地壳和上地幔。电离层是大气层的上层，在对流层和平流层上面，和中气层及增温层重叠。不过接下来这些，可能是你到现在为止，从来没有听说过的事情。不过实际上这件事，在你的日常

中国科普博览 / 0评论 2017-12-18

主播界地震! 帝师又实锤五五开, 上海狐帝少年大爆料UU妹!

昨天，帝师在新浪微博上就爆料称，五五开和UU妹一起欺骗了一个想打职业的少年。这个少年的网名叫做狐帝。并且微博图片中，含有大量的五五开女友uu与这位少年的聊天记录。有兴趣的朋友可以去贴吧看看！然后今天晚上，帝师开播也如期和“当事人”帝师连麦爆料。根据这个三岁

爱燃烧最专业的中文跑步运动社区 / 0评论 2017-12-18

世界上著名的十个未解之谜，长知识了，现实中竟存在时空隧道？

在人类漫长的发展历史上，不断的在发生着各种诡异未解的事情，对于人类来说，许多的超自然现象至今仍然无法被解释。下面我们来一起看下世界上著名的十个未解之谜吧！历史上记录了它两次突然枯竭的史实，令人费解不已。1954年1月13日下午4时许，这一现象在此再度出现。

祖先 / 0评论 2017-12-16

骑士有望得全明星内线恐引发联盟地震, 詹姆斯得完美助手夺冠有望

曾经西部人见人怕的灰熊，如今已经变成了副升班马，排名西部倒数第二，这让灰熊球迷很受伤，管理层今年夏天的不作为才导致了如今的局面。据悉，孟菲斯当地媒体报道，灰熊队管理层已经和骑士进行接触，来商讨有关小加的交易事项，具体细节还有待商定，但是小加索尔有望加盟骑士

二师兄的脑洞大又圆 / 0评论 2017-12-15

性能车市场大地震, 已超万人不买思域、昂克赛拉转而选它

当全球汽车市场开始想年轻化倾斜，性能车市场份额日渐壮大，而每个时间段总有一台让这个市场地震的好车横空出世。之前是马自达昂克赛拉让众多年轻消费者趋之若鹜，后来是十代思域一度加价，而最近，全新名爵6则是比之前两位都要火。数据统计，名爵6上市第一个周订单2000

弄懂石墨烯其实并不难 / 0评论 2017-12-11

奶粉界再遭“地震”, 这几种奶粉上了黑名单, 你家娃喝的上榜了吗

孩子是父母的心头肉，但很多商家只顾追求当下的商业利益，根本就不顾奶粉是否合格是否安全。外国奶粉在中国十分热销，然而除了奶粉，连奶粉空罐也成为了中国商家的目标。据报道，有中国商家回收利用这些空罐进行奶粉造假，然后再出售给消费者。据了解，中国代购和个人消费者通

一群旅行体验师 / 0评论 2017-12-06

四川地震, 此国第一个降半旗, 居民称祖先曾是中国一支叛军

大家都知道，美洲的土著居民被统称为印第安人。但在所有美洲土著居民当中，有一支显得非常奇特，因为他们属于黄种人，长相跟中国人特别接近，不像是美洲土生土长的，倒像是外来户。这一支印第安人目前主要生活在南美国家—秘鲁。在2008年四川发生地震的时候，秘鲁率先降半

政见CNPolitics拆掉知识的高墙 / 0评论 2017-12-01

机器人地震救援实际表现如何？媒体跟学者们聊了聊

雷锋网按：9月19日，墨西哥城发生7.1级地震。在地震发生后不久，震区迎来了一支特别的队伍——一队来自卡内基·梅隆大学的机器人专家，他们希望了解他们的蛇形机器人是否可以更好帮助搜索和救援工作。近日，IEEE Spectrum采访了这只队伍的负责人Matt

世界说 / 0评论 2017-10-14

美苏两国30年不敢登月 竟和外星人有关

自1972 年12月美国“阿波罗17号”飞船返回地球、美国结束“阿波罗”登月计划后，30多年来，美国、苏联从此再未进行过任何载人登月任务。一种观点认为，这是因为所有25名飞往月球的美国宇航员都曾在月球上发现过不明飞行物，对外星强大科技的“畏惧”，促使美国宇

黑白漫文化 / 0评论 2017-10-05

岛国日本为研究地震, 欲打穿地壳 科学家: 日本已疯, 这是在自取灭亡

不过，这就将要成为现实，因为近期日本地球研究院就对外宣称，他们将进行前所未有的科学考察，就是把地核打穿，用来研究地震的作用原理，为人类的地震研究科学上弥补一部分空白。此消息一出，在全球科学界中一石激起千层浪，很多科学家都认为日本已经疯了。当然从侧面来说，我

扑克投资家 / 0评论 2017-10-05

马里纳亚海沟以每年超过10厘米的速度向日本靠拢，这速度还将加快

日本这个岛国位于环太平洋火山带，形似一个马蹄形区域沿着太平洋边缘，世界上许多地震和火山爆发都出现在这里。根据美国地质勘探局的数据，世界上 81%的强地震都发生在这条活 动 带 上 。如果日本再经历一次高强度的地震，科学家预测日本整个国土将慢慢滑入海沟，日本

中国科普博览 / 0评论 2017-10-05

神奇！地动仪发明者——张衡故里2000年未发生过地震，科学界震惊！

张衡，字平子，南阳西鄂人，是东汉中期浑天说的代表人物之一，他指出月球本身并不发光，月光其实是日光的反射，他还正确地解释了月食的成因。1802号小行星以他的名字命名。公元132年，张衡在太史令任上发明了最早的地动仪，称为候风地动仪。以使这座养育过他的土地上的

中国科普博览 / 0评论 2017-10-04

躲避地震经验教你怎么样最安全 躲在桌下最危险

如果你依照小时候老师教我们的方法乖乖躲在桌子底下，床铺底下，那么，我必须告诉你，你的伤亡率，高达98%！美国国际搜救队长道格卡普教你正确的躲避位置。道格卡普，自1985年以来，他及他的队员己参与全世界79次重大灾难的救灾工作，他曾经爬进近700多栋因为地震

软件设计 / 0评论 2017-07-09

四川汶川发生7.6级地震_河北石家庄组图

2008年5月12日，北京受到地震波及，新华网大成大厦楼下站满了疏散的市民。四川汶川发生地震 5月12日，成都震感强烈。这是新华社四川分社技术室内被晃倒的办公用品。

软件设计 / 0评论 2017-06-19

地震避险自救常识

当场内断电时，不要乱喊乱叫，更不得乱挤乱拥，应就地蹲下或躲在排椅下，注意避开吊灯、电扇等悬挂物，用皮包等物保护头。部，等地震过后，听从工作人员指挥，有组织地撤离。立即关闭煤气和电闸，将炉火扑灭。员，应迅速离开山边、水边等危险地，以防滑坡、地裂、涨水等突发事

软件设计 / 0评论 2017-06-19