JS實現模擬百度搜索“2012世界末日”網頁地震撕裂效果代碼
編輯：關於JavaScript
本文實例講述了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程序設計有所幫助。
小編推薦
JavaScript知識點總結(十一)之js中的Object類詳解
bootstrap datepicker 與bootstrapValidator同時使用時選擇日期後無法正常觸發校驗的解決思路
JavaScript中boolean類型之三種情景實例代碼
javascript十六進制及二進制轉化的方法
網頁常用小技巧—javascript篇
Bootstrap模態框調用功能實現方法
Easy.Ajax 部分源代碼 支持文件上傳功能， 兼容所有主流浏覽器
深入剖析JavaScript中的函數currying柯裡化
node.js中的fs.fchmod方法教程使用說明詳解
js iframe跨域訪問(同主域/非同主域)分別深入介紹
熱門推薦