Heim > Artikel > Web-Frontend > jquery html5 romantischer Liebesgeständnis-Animationscodesharing_jquery

jquery html5 romantischer Liebesgeständnis-Animationscodesharing_jquery

WBOYOriginal: 2016-05-16 15:43:063862Durchsuche

Das Beispiel in diesem Artikel beschreibt den jquery html5-Animationscode für romantische Liebesgeständnisse. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Die romantische Liebesgeständnisanimation von jquery html5 ist eine elektronische Version der romantischen Liebesgeständnisanimation von jquery html5. Der Effekt ist recht gut, sehr kreativ und sehr gut für Geständnisse geeignet.

Operationsrendering: --------Effekt anzeigen Quellcode herunterladen--- -------------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte JQuery-HTML5-Animationscode für romantische Liebesgeständnisse lautet wie folgt

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

Das Obige ist der Jquery-HTML5-Animationscode für romantische Liebesgeständnisse, den ich mit Ihnen geteilt habe.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren Sie basierend auf jquery den Inhalt des Auswahlfelds, um ihn nach links und rechts zu bewegen, und fügen Sie Code „sharing_jquery“ hinzu und löschen Sie ihnNächster Artikel：Implementieren Sie basierend auf jquery den Inhalt des Auswahlfelds, um ihn nach links und rechts zu bewegen, und fügen Sie Code „sharing_jquery“ hinzu und löschen Sie ihn

In Verbindung stehende Artikel

Mehr sehen