recherche

Maison  >  Article  >  interface Web  >  JS implémente une simulation de recherche Baidu "Fin du monde 2012" sur la page Web avec effet de déchirure du tremblement de terre, compétences code_javascript

JS implémente une simulation de recherche Baidu "Fin du monde 2012" sur la page Web avec effet de déchirure du tremblement de terre, compétences code_javascript

WBOY
WBOYoriginal
2016-05-16 15:34:211770parcourir

L'exemple de cet article décrit le code JS pour simuler l'effet de déchirement du tremblement de terre de la page Web "2012 Doomsday" de la recherche Baidu. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'une simulation JS de l'effet de déchirement du tremblement de terre sur la page Web de recherche Baidu "2012 Doomsday". Cet effet vise à imiter l'effet de page Web qui apparaît après que l'utilisateur clique sur le bouton de recherche après avoir entré "2012 Doomsday" sur Baidu. La page Web vibre, comme s'il y avait eu un tremblement de terre, puis elle a commencé à se déchirer, puis des descriptions textuelles pertinentes ont été affichées. C'était un effet sympa. J'espère que tout le monde pourra en tirer des leçons.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Plug-in de détection de la force du mot de passe jQuery, exemple d'utilisation de passwordStrength Analysis_jqueryArticle suivant：Plug-in de détection de la force du mot de passe jQuery, exemple d'utilisation de passwordStrength Analysis_jquery

Articles Liés

Voir plus