zoukankan      html  css  js  c++  java

  • 网页向女友/老婆告白和纪念日专用特效

    原文地址：http://blog.csdn.net/lisenyang/article/details/35220823

    不多废话。直接上代码，效果和源码js等文件随后附上！

    [html] view plaincopyprint?

    在CODE上查看代码片派生到我的代码片

    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Tc.Web.admin.biaobai.renxi.WebForm1" %>  
    2.   
    3. <!DOCTYPE html>  
    4.   
    5. <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">  
    6. <head>  
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    8. <title>我爱你</title>  
    9. <link type="text/css" rel="stylesheet" href="renxi/default.css">  
    10. <script type="text/javascript" src="renxi/jquery.min.js"></script>  
    11. <script type="text/javascript" src="renxi/jscex.min.js"></script>  
    12. <script type="text/javascript" src="renxi/jscex-parser.js"></script>  
    13. <script type="text/javascript" src="renxi/jscex-jit.js"></script>  
    14. <script type="text/javascript" src="renxi/jscex-builderbase.min.js"></script>  
    15. <script type="text/javascript" src="renxi/jscex-async.min.js"></script>  
    16. <script type="text/javascript" src="renxi/jscex-async-powerpack.min.js"></script>  
    17. <script type="text/javascript" src="renxi/functions.js" charset="utf-8"></script>  
    18. <script type="text/javascript" src="renxi/love.js" charset="utf-8"></script>  
    19. <style type="text/css">  
    20. <!--  
    21. .STYLE1 {  
    22.     color: #666666  
    23. }  
    24. -->  
    25. </style>  
    26. </head>  
    27. <body>  
    28. <audio autoplay="autopaly">  
    29.   <source src="renxi.mp3" type="audio/mp3" />  
    30. </audio>  
    31. <div id="main">  
    32.   <div id="error">本页面採用HTML5编辑，眼下您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其它游览器的最新版本号。</div>  
    33.   <div id="wrap">  
    34.     <div id="text">  
    35.       <div id="code"> <font color="#FF0000"> <span class="say">亲爱的宝宝，我爱你</span><br>  
    36.         <span class="say"> </span><br>  
    37.         <span class="say"> 我知道我不会甜言蜜语。</span><br>  
    38.         <span class="say"> </span><br>  
    39.         <span class="say"> 可是我会用行动证明一切</span><br>  
    40.         <span class="say"> </span><br>  
    41.         <span class="say">你说我啰嗦，</span><br>               
    42.             <span class="say"> 有些东西由于越在乎所以越怕失去</span><br>  
    43.             <span class="say"> </span><br>  
    44.         <span class="say">由于我太爱你了，所以我害怕失去你</span><br>  
    45.                 <span class="say"> </span><br>  
    46.         <span class="say">由于我太爱你了，所以我对你总啰嗦</span><br>  
    47.                 <span class="say"> </span><br>  
    48.         <span class="say">希望能够执子之手，与子偕老</span><br>  
    49.                 <span class="say"> </span><br>  
    50.         <span class="say">假设上天让我许三个愿望，</span><br>  
    51.                 <span class="say">第一个是今生今世和你在一起， </span><br>  
    52.              <span class="say"> </span><br>  
    53.              <span class="say"> 第二个是再生再世和你在一起。</span><br>  
    54.              <span class="say"> </span><br>  
    55.              <span class="say">第三个是永生永世和你不分离 </span><br>  
    56.         <span class="say"><span class="space"></span> -- 爱你的老公</span> </font>  
    57.             <br />  
    58.             <br />  
    59.         </p>  
    60.       </div>  
    61.     </div>  
    62.       
    63.     <div id="clock-box"> <span class="STYLE1"></span><font color="#FF4500">亲爱的宝宝。我爱你</font> <span class="STYLE1">已经是……</span>  
    64.       <div id="clock"></div>  
    65.     </div>  
    66.     <canvas id="canvas" width="1100" height="680"></canvas>  
    67.   </div>  
    68. </div>  
    69. <script>  
    70.     </script>  
    71. <script>  
    72.     (function () {  
    73.         var canvas = $('#canvas');  
    74.   
    75.         if (!canvas[0].getContext) {  
    76.             $("#error").show();  
    77.             return false;  
    78.         }  
    79.   
    80.         var width = canvas.width();  
    81.         var height = canvas.height();  
    82.         canvas.attr("width", width);  
    83.         canvas.attr("height", height);  
    84.         var opts = {  
    85.             seed: {  
    86.                 x: width / 2 - 20,  
    87.                 color: "rgb(190, 26, 37)",  
    88.                 scale: 2  
    89.             },  
    90.             branch: [  
    91.                 [535, 680, 570, 250, 500, 200, 30, 100, [  
    92.                     [540, 500, 455, 417, 340, 400, 13, 100, [  
    93.                         [450, 435, 434, 430, 394, 395, 2, 40]  
    94.                     ]],  
    95.                     [550, 445, 600, 356, 680, 345, 12, 100, [  
    96.                         [578, 400, 648, 409, 661, 426, 3, 80]  
    97.                     ]],  
    98.                     [539, 281, 537, 248, 534, 217, 3, 40],  
    99.                     [546, 397, 413, 247, 328, 244, 9, 80, [  
    100.                         [427, 286, 383, 253, 371, 205, 2, 40],  
    101.                         [498, 345, 435, 315, 395, 330, 4, 60]  
    102.                     ]],  
    103.                     [546, 357, 608, 252, 678, 221, 6, 100, [  
    104.                         [590, 293, 646, 277, 648, 271, 2, 80]  
    105.                     ]]  
    106.                 ]]  
    107.             ],  
    108.             bloom: {  
    109.                 num: 700,  
    110.                  1080,  
    111.                 height: 650,  
    112.             },  
    113.             footer: {  
    114.                  1200,  
    115.                 height: 5,  
    116.                 speed: 10,  
    117.             }  
    118.         }  
    119.   
    120.         var tree = new Tree(canvas[0], width, height, opts);  
    121.         var seed = tree.seed;  
    122.         var foot = tree.footer;  
    123.         var hold = 1;  
    124.   
    125.         canvas.click(function (e) {  
    126.             var offset = canvas.offset(), x, y;  
    127.             x = e.pageX - offset.left;  
    128.             y = e.pageY - offset.top;  
    129.             if (seed.hover(x, y)) {  
    130.                 hold = 0;  
    131.                 canvas.unbind("click");  
    132.                 canvas.unbind("mousemove");  
    133.                 canvas.removeClass('hand');  
    134.             }  
    135.         }).mousemove(function (e) {  
    136.             var offset = canvas.offset(), x, y;  
    137.             x = e.pageX - offset.left;  
    138.             y = e.pageY - offset.top;  
    139.             canvas.toggleClass('hand', seed.hover(x, y));  
    140.         });  
    141.   
    142.         var seedAnimate = eval(Jscex.compile("async", function () {  
    143.             seed.draw();  
    144.             while (hold) {  
    145.                 $await(Jscex.Async.sleep(10));  
    146.             }  
    147.             while (seed.canScale()) {  
    148.                 seed.scale(0.95);  
    149.                 $await(Jscex.Async.sleep(10));  
    150.             }  
    151.             while (seed.canMove()) {  
    152.                 seed.move(0, 2);  
    153.                 foot.draw();  
    154.                 $await(Jscex.Async.sleep(10));  
    155.             }  
    156.         }));  
    157.   
    158.         var growAnimate = eval(Jscex.compile("async", function () {  
    159.             do {  
    160.                 tree.grow();  
    161.                 $await(Jscex.Async.sleep(10));  
    162.             } while (tree.canGrow());  
    163.         }));  
    164.   
    165.         var flowAnimate = eval(Jscex.compile("async", function () {  
    166.             do {  
    167.                 tree.flower(2);  
    168.                 $await(Jscex.Async.sleep(10));  
    169.             } while (tree.canFlower());  
    170.         }));  
    171.   
    172.         var moveAnimate = eval(Jscex.compile("async", function () {  
    173.             tree.snapshot("p1", 240, 0, 610, 680);  
    174.             while (tree.move("p1", 500, 0)) {  
    175.                 foot.draw();  
    176.                 $await(Jscex.Async.sleep(10));  
    177.             }  
    178.             foot.draw();  
    179.             tree.snapshot("p2", 500, 0, 610, 680);  
    180.   
    181.             // 会有闪烁不得意这样做, (＞﹏＜)  
    182.             canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");  
    183.             canvas.css("background", "#ffe");  
    184.             $await(Jscex.Async.sleep(300));  
    185.             canvas.css("background", "none");  
    186.         }));  
    187.   
    188.         var jumpAnimate = eval(Jscex.compile("async", function () {  
    189.             var ctx = tree.ctx;  
    190.             while (true) {  
    191.                 tree.ctx.clearRect(0, 0, width, height);  
    192.                 tree.jump();  
    193.                 foot.draw();  
    194.                 $await(Jscex.Async.sleep(25));  
    195.             }  
    196.         }));  
    197.   
    198.         var textAnimate = eval(Jscex.compile("async", function () {  
    199.             var together = new Date();  
    200.             together.setFullYear(2010, 3,1);            //时间年月日  
    201.             together.setHours(16);                      //小时      
    202.             together.setMinutes(53);                    //分钟  
    203.             together.setSeconds(0);                 //秒前一位  
    204.             together.setMilliseconds(2);                //秒第二位  
    205.   
    206.             $("#code").show().typewriter();  
    207.             $("#clock-box").fadeIn(500);  
    208.             while (true) {  
    209.                 timeElapse(together);  
    210.                 $await(Jscex.Async.sleep(1000));  
    211.             }  
    212.         }));  
    213.   
    214.         var runAsync = eval(Jscex.compile("async", function () {  
    215.             $await(seedAnimate());  
    216.             $await(growAnimate());  
    217.             $await(flowAnimate());  
    218.             $await(moveAnimate());  
    219.   
    220.             textAnimate().start();  
    221.   
    222.             $await(jumpAnimate());  
    223.         }));  
    224.   
    225.         runAsync().start();  
    226.     })();  
    227.     </script>  
    228.   
    229.   
    230. </body>  
    231. </html>  
    效果如图：



    点击下载源码

    点击下载源码（html版）
  • 相关阅读:
    day4
    cache用法
    Excel批量生成SQL语句，处理大量数据(增,改)
    IDEA中Maven依赖下载失败解决方案
    IDEA 自动生成类图 UML
    springboot报错说 Failed to parse multipart servlet request; nested exception is java.io.IOException
    controller层的引用service层一直报空指针问题
    CONCATENATE函数
    AQS
    String 类和常量池
  • 原文地址：https://www.cnblogs.com/lcchuguo/p/5265471.html
Copyright © 2011-2022 走看看