recherche

Maison >interface Web >js tutoriel >jquery html5 code d'animation de confession d'amour romantique Sharing_jquery

jquery html5 code d'animation de confession d'amour romantique Sharing_jquery

WBOY
WBOYoriginal
2016-05-16 15:43:063936parcourir

L'exemple de cet article décrit le code d'animation jquery html5 de confession d'amour romantique. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
L'animation de confession d'amour romantique jquery html5 est une version électronique de toile jquery html5 de l'animation de confession d'amour romantique. L'effet est assez bon, très créatif et très approprié pour la confession.

Opération de rendu : ----------------------Voir l'effet Télécharger le code source--- --- -------------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Le code d'animation jquery html5 de confession d'amour romantique partagé avec vous 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=utf-8" />
<title>jquery+html5烂漫爱心表白动画</title>

<style type="text/css">
@font-face {
 font-family: digit;
 src: url('digital-7_mono.ttf') format("truetype");
}
</style>

<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

</head>

<body>

<div id="mainDiv">
 <div id="content">
 <div id="code">
  <span class="comments">/**</span><br />
  <span class="space"/><span class="comments">*2013—02-14,</span><br />
  <span class="space"/><span class="comments">*2013-02-28.</span><br />
  <span class="space"/><span class="comments">*/</span><br />
  Boy name = <span class="keyword">Mr</span> LI<br />
  Girl name = <span class="keyword">Mrs</span> ZHANG<br />
  <span class="comments">// Fall in love river. </span><br />
  The boy love the girl;<br />
  <span class="comments">// They love each other.</span><br />
  The girl loved the boy;<br />
  <span class="comments">// AS time goes on.</span><br />
  The boy can not be separated the girl;<br />
  <span class="comments">// At the same time.</span><br />
  The girl can not be separated the boy;<br />
  <span class="comments">// Both wind and snow all over the sky.</span><br />
  <span class="comments">// Whether on foot or 5 kilometers.</span><br />
  <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
  <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
  <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
  <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
  <span class="placeholder"/>The boy has but one dream;<br />
  <span class="comments">// The boy wants the girl could well have been happy.</span><br />
  <br>
  <br>
  I want to say:<br />
  Baby, I love you forever;<br />
 </div>
 <div id="loveHeart">
  <canvas id="garden"></canvas>
  <div id="words">
  <div id="messages">
   亲爱的，这是我们相爱在一起的时光。
   <div id="elapseClock"></div>
  </div>
  <div id="loveu">
   爱你直到永永远远。<br/>
   <div class="signature">- 李先生</div>
  </div>
  </div>
 </div>
 </div>
</div>

<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2013, 2, 28);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
 var msg = document.createElement("div");
 msg.id = "errorMsg";
 msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
 document.body.appendChild(msg);
 $("#code").css("display", "none")
 $("#copyright").css("position", "absolute");
 $("#copyright").css("bottom", "10px");
 document.execCommand("stop");
} else {
 setTimeout(function () {
 startHeartAnimation();
 }, 5000);

 timeElapse(together);
 setInterval(function () {
 timeElapse(together);
 }, 500);

 adjustCodePosition();
 $("#code").typewriter();
}
</script>
<div style="text-align:center;clear:both"></div>
</body>
</html>

Ce qui précède est le code d'animation de confession d'amour romantique jquery html5 partagé avec vous. J'espère que vous pourrez l'aimer.

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：Basé sur jquery, implémentez le contenu de la boîte de sélection pour vous déplacer vers la gauche et la droite, ajoutez et supprimez le code Sharing_jqueryArticle suivant：Basé sur jquery, implémentez le contenu de la boîte de sélection pour vous déplacer vers la gauche et la droite, ajoutez et supprimez le code Sharing_jquery

Articles Liés

Voir plus