jquery+html5烂漫爱心表白动画代码分享

前端技术 2023/09/07 JavaScript

本文实例讲述了jquery+html5烂漫爱心表白动画代码。分享给大家供大家参考。具体如下：
jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画，效果相当不错，非常有创意，很适合进行表白。

运行效果图：----------------------查看效果 下载源码-----------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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烂漫爱心表白动画代码，希望大家可以喜欢。

本文地址：https://www.stayed.cn/item/19044

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案