HTML5+jQuery制作温馨浪漫爱心表白动画特效

下载地址(演示地址):http://www.xwcms.net/js/html5sl/69184.html



[html]  view plain  copy
 print ?
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>HTML5+jQuery制作温馨浪漫爱心表白动画特效(我们程序员也有浪漫的时候)-zuidaima.comtitle>  
  6.   
  7. <style type="text/css">  
  8. @font-face {  
  9.     font-family: digit;  
  10.     src: url('digital-7_mono.ttf') format("truetype");  
  11. }  
  12. style>  
  13.   
  14. <link href="css/default.css" type="text/css" rel="stylesheet">  
  15. <script type="text/javascript" src="js/jquery.js">script>  
  16. <script type="text/javascript" src="js/garden.js">script>  
  17. <script type="text/javascript" src="js/functions.js">script>  
  18.   
  19. head>  
  20.   
  21. <body>  
  22.   
  23. <div id="mainDiv">  
  24.     <div id="content">  
  25.         <div id="code">  
  26.             <span class="comments">/**span><br />  
  27.             <span class="space"/><span class="comments">*2014—01-01,span><br />  
  28.             <span class="space"/><span class="comments">*2014-01-04.span><br />  
  29.             <span class="space"/><span class="comments">*/span><br />  
  30.             Boy name = <span class="keyword">Mrspan> LI<br />  
  31.             Girl name = <span class="keyword">Mrsspan> ZHANG<br />  
  32.             <span class="comments">// Fall in love river. span><br />  
  33.             The boy love the girl;<br />  
  34.             <span class="comments">// They love each other.span><br />  
  35.             The girl loved the boy;<br />  
  36.             <span class="comments">// AS time goes on.span><br />  
  37.             The boy can not be separated the girl;<br />  
  38.             <span class="comments">// At the same time.span><br />  
  39.             The girl can not be separated the boy;<br />  
  40.             <span class="comments">// Both wind and snow all over the sky.span><br />  
  41.             <span class="comments">// Whether on foot or 5 kilometers.span><br />  
  42.             <span class="keyword">The boyspan> very <span class="keyword">happyspan>;<br />  
  43.             <span class="keyword">The girlspan> is also very <span class="keyword">happyspan>;<br />  
  44.             <span class="placeholder"/><span class="comments">// Whether it is right nowspan><br />  
  45.             <span class="placeholder"/><span class="comments">// Still in the distant future.span><br />  
  46.             <span class="placeholder"/>The boy has but one dream;<br />  
  47.             <span class="comments">// The boy wants the girl could well have been happy.span><br />  
  48.             <br>  
  49.             <br>  
  50.             I want to say:<br />  
  51.             Baby, I love you forever;<br />  
  52.         div>  
  53.         <div id="loveHeart">  
  54.             <canvas id="garden">canvas>  
  55.             <div id="words">  
  56.                 <div id="messages">  
  57.                     亲爱的,这是我们相爱在一起的时光。  
  58.                     <div id="elapseClock">div>  
  59.                 div>  
  60.                 <div id="loveu">  
  61.                     爱你直到永永远远。<br/>  
  62.                     <div class="signature">- 爱你的人div>  
  63.                 div>  
  64.             div>  
  65.         div>  
  66.     div>  
  67.     <div id="copyright">  
  68.         <a href="#">....a><br />  
  69.         <a href="#">....a><br />  
  70.           
  71.     div>  
  72. div>  
  73.   
  74. <script type="text/javascript">  
  75. var offsetX = $("#loveHeart").width() / 2;  
  76. var offsetY = $("#loveHeart").height() / 2 - 55;  
  77. var together = new Date();  
  78. together.setFullYear(2013, 2, 28);  
  79. together.setHours(20);  
  80. together.setMinutes(0);  
  81. together.setSeconds(0);  
  82. together.setMilliseconds(0);  
  83.   
  84. if (!document.createElement('canvas').getContext) {  
  85.     var msg = document.createElement("div");  
  86.     msg.id = "errorMsg";  
  87.     msg.innerHTML = "Your browser doesn't support HTML5!
    Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"
    ;   
  88.     document.body.appendChild(msg);  
  89.     $("#code").css("display", "none")  
  90.     $("#copyright").css("position", "absolute");  
  91.     $("#copyright").css("bottom", "10px");  
  92.     document.execCommand("stop");  
  93. } else {  
  94.     setTimeout(function () {  
  95.         startHeartAnimation();  
  96.     }, 5000);  
  97.   
  98.     timeElapse(together);  
  99.     setInterval(function () {  
  100.         timeElapse(together);  
  101.     }, 500);  
  102.   
  103.     adjustCodePosition();  
  104.     $("#code").typewriter();  
  105. }  
  106. script>  
  107.   
  108. body>  
  109. html>  



代码下载地址:

http://www.zuidaima.com/html/1695882735602688/index.html#


演示站地址:

http://www.fuliqu.com/0214/?id=1392081413


你可能感兴趣的:(前端)