脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS模拟百度搜索“2012世界末日”网页地震撕裂效果

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

 更新时间：2015年10月31日 10:21:29   作者：企鹅  
这篇文章主要介绍了JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码,引入第三方插件实现页面的抖动、撕裂及图片等效果,需要的朋友可以参考下

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

这是一款JS模拟百度搜索“2012世界末日”网页地震撕裂效果，本效果是模仿用户在百度输入“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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • js实现弹窗暗层效果

    js实现弹窗暗层效果

    本文主要分享了js实现弹窗暗层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Bootstrap中表单控件状态(验证状态)

    Bootstrap中表单控件状态(验证状态)

    这篇文章主要介绍了Bootstrap中表单控件状态(验证状态) 的相关资料,还给大家介绍了在Bootstrap框架中提供的机制验证效果，非常不错，需要的朋友可以参考下
    2016-08-08
  • 微信小程序mpvue点击按钮获取button值的方法

    微信小程序mpvue点击按钮获取button值的方法

    这篇文章主要介绍了小程序mpvue点击按钮获取button值的方法，本文通过两种方法，给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • js判断变量是否未定义的代码

    js判断变量是否未定义的代码

    一般如果变量通过var声明，但是并未初始化的时候，变量的值为undefined，而未定义的变量则需要通过 "typeof 变量"的形式来判断，否则会发生错误
    2012-11-11
  • 微信小程序中使用echarts的实现方法

    微信小程序中使用echarts的实现方法

    这篇文章主要介绍了微信小程序中使用echarts的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一篇文章让你搞懂JavaScript 原型和原型链

    一篇文章让你搞懂JavaScript 原型和原型链

    这篇文章主要介绍了一篇文章让你搞懂JavaScript 原型和原型链，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-11-11
  • Bootstrap入门教程一Hello Bootstrap初识

    Bootstrap入门教程一Hello Bootstrap初识

    Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下
    2017-03-03
  • Javascript变量函数浅析

    Javascript变量函数浅析

    在javascript变量中可以存放两种类型的值：原始值和引用值。原始值存储在栈上的简单字段，也就是值直接存储在变量所标示的位置内。
    2011-09-09
  • JS Range HTML文档/文字内容选中、库及应用介绍

    JS Range HTML文档/文字内容选中、库及应用介绍

    本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的
    2011-05-05
  • JavaScript WeakMap的具体使用

    JavaScript WeakMap的具体使用

    本文主要介绍了JavaScript WeakMap的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02

最新评论