jquery html5 낭만적인 사랑 고백 애니메이션 코드 Sharing

jquery html5 낭만적인 사랑 고백 애니메이션 코드 Sharing_jquery

WBOY

풀어 주다： 2016-05-16 15:43:06

원래의

3884명이 탐색했습니다.

이 기사의 예에서는 jquery html5 낭만적인 사랑 고백 애니메이션 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
jquery html5 낭만적인 사랑 고백 애니메이션은 낭만적인 사랑 고백 애니메이션의 jquery html5 캔버스 전자 버전입니다. 효과는 매우 좋고 매우 창의적이며 고백에 매우 적합합니다.

작업 렌더링: ---------효과 보기 소스 코드 다운로드--- -- -----

팁: 브라우저가 제대로 작동하지 않으면 탐색 모드를 전환해 보세요.
여러분께 공유해 드리는 jquery html5 로맨틱 사랑고백 애니메이션 코드는 다음과 같습니다

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

로그인 후 복사

위 내용은 여러분에게 공유된 jquery html5 로맨틱 사랑 고백 애니메이션 코드입니다.