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


Posted in Javascript onOctober 31, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
js实现放大镜特效
May 18 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 #Javascript
js实现点击获取验证码倒计时效果
Jan 28 #Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 #Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
You might like
windows下安装php的memcache模块的方法
2015/04/07 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
wxPython中listbox用法实例详解
2015/06/01 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python3 pygame实现接小球游戏
2019/05/14 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
个人简历自荐信
2013/12/05 职场文书
赡养老人协议书
2014/04/21 职场文书
文员求职信
2014/07/15 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
Python编程编写完善的命令行工具
2021/09/15 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL