Web page to girlfriend Confession and anniversary special effects

Not much nonsense, directly on the code, the effect and the source JS and other files are attached later.

<%@ page language= "C #" autoeventwireup= "true" codebehind= "WebForm1.aspx.cs" inherits= " Tc.Web.admin.biaobai.renxi.WebForm1 "%><! DOCTYPE html>
 
 
</div> <div id= "wrap" > <div id= "text" > <div id= "code" > <font color= "#FF0000" > <s Pan class= "say" > Dear Baby, I love you </span><br> <span class= "say" > </span><br> <spa N class= "say" > I know I won't be sweet,</span><br> <span class= "say" > </span><br> <sp An class= "say" > But I will prove everything by action </span><br> <span class= "say" > </span><br> <s Pan class= "Say" > You say I'm verbose,</span><br> <span class= "say" > Some things because the more they care, the more afraid of losing </span ><br> <span class= "say" > </span><br> <span class= "say" > Because I love you so much, I'm afraid of losing you. </span><br> <span class= "say" > </span><br> <span class= "say" > Because I Love you so much, so I'm always wordy with you </span><br> <span class= "say" > </span><br> <span Class = "Say" > Hope to hold the hand of the sonLt;/span><br> <span class= "say" > </span><br> <span class= "say" > Assuming heaven             Let me make three wishes,</span><br> <span class= "Say" > The first one is a lifetime with you, </span><br> <span class= "Say" > </span><br> <span class= "Say" > The second one is regenerating reincarnation with you. </span><br> <span class= "say" > </span><br> <span class= "Say" > Three are forever and you do not separate </span><br> <span class= "say" ><span class= "Space" ></span>--Love your husband </s        pan> </font> <br/> <br/> </p> </div> </div> <div id= "Clock-box" > <span class= "STYLE1" ></span><font color= "#FF4500" > Dear Baby, I love you </font& Gt <span class= "STYLE1" > is already ......</span> <div id= "Clock" ></div> </div> <canvas id= "CA Nvas "width=" 1100 "height=" 680 "></canvas> </div></div><script> </script><script> (function () {var canvas = $ ('        #canvas ');            if (!canvas[0].getcontext) {$ ("#error"). Show ();        return false;        } var width = canvas.width ();        var height = canvas.height ();        Canvas.attr ("width", width);        Canvas.attr ("height", height);                var opts = {seed: {x:width/2-A, Color: "RGB (190, 26, 37)", Scale:2}, Branch: [[535, 680, 570, 250, 500, 200, 30, 100, [[ 540, 500, 455, 417, 340, 400, 13, 100, [[450, 435, 434, 430, 394, 395, 2, 40]] ], [550, 445, 600, 356, 680, 345, 12, 100, [[578, 400, 648, 409, 661, 426, 3, 8 0]], [539, 281, 537, 248, 534, 217, 3, 40], [546, 397, 413, 247 , 328, 244, 9, 80, [[427, 286, 383, 253, 371, 205, 2, 40], [498, 345, 435, 315                        , 395, 330, 4, 60]], [546, 357, 608, 252, 678, 221, 6, 100, [                [590, 293, 646, 277, 648, 271, 2, 80]]            ]], Bloom: {num:700, width:1080, height:650,            }, footer: {width:1200, height:5, Speed:10,        }} var tree = new Tree (canvas[0], width, height, opts);        var seed = Tree.seed;        var foot = Tree.footer;        var hold = 1;            Canvas.click (function (e) {var offset = Canvas.offset (), x, y;            x = E.pagex-offset.left;            y = e.pagey-offset.top;                if (Seed.hover (x, y)) {hold = 0;                Canvas.unbind ("click"); Canvas.unbind ("MouseMove");            Canvas.removeclass (' hand ');            }}). MouseMove (function (e) {var offset = Canvas.offset (), x, y;            x = E.pagex-offset.left;            y = e.pagey-offset.top;        Canvas.toggleclass (' Hand ', seed.hover (x, y));        });            var seedanimate = eval (jscex.compile ("Async", function () {Seed.draw ();            while (hold) {$await (Jscex.Async.sleep (10));                } while (Seed.canscale ()) {Seed.scale (0.95);            $await (Jscex.Async.sleep (10));                } while (Seed.canmove ()) {seed.move (0, 2);                Foot.draw ();            $await (Jscex.Async.sleep (10));        }        }));                var growanimate = eval (jscex.compile ("Async", function () {do {tree.grow ();            $await (Jscex.Async.sleep (10));        } while (Tree.cangrow ());        })); var flowanimate = Eval (Jscex.compile ("Async", function () {do {tree.flower (2);            $await (Jscex.Async.sleep (10));        } while (Tree.canflower ());        }));            var moveanimate = eval (jscex.compile ("Async", function () {tree.snapshot ("P1", 240, 0, 610, 680);                while (Tree.move ("P1", 0)) {Foot.draw ();            $await (Jscex.Async.sleep (10));            } foot.draw ();            Tree.snapshot ("P2", 500, 0, 610, 680);            There will be flicker does not mean to do so, (>﹏<) canvas.parent (). CSS ("Background", "url (" + Tree.todataurl (' image/png ') + ")");            CANVAS.CSS ("Background", "#ffe");            $await (Jscex.Async.sleep (300));        CANVAS.CSS ("Background", "none");        }));            var jumpanimate = eval (jscex.compile ("Async", function () {var ctx = Tree.ctx;                while (true) {tree.ctx.clearRect (0, 0, width, height);                Tree.jump ();Foot.draw ();            $await (Jscex.Async.sleep (25));        }        }));            var textanimate = eval (jscex.compile ("Async", function () {var together = new Date (); Together.setfullyear (2010, 3,1); Time and date together.sethours (16);//hour Together.setminutes (53);//min. together.setseconds (0);//            Seconds ago a bit together.setmilliseconds (2);//sec Second bit ("#code"). Show (). Typewriter ();            $ ("#clock-box"). FadeIn (500);                while (true) {timeelapse (together);            $await (Jscex.Async.sleep (1000));        }        }));            var runAsync = eval (jscex.compile ("Async", function () {$await (Seedanimate ());            $await (Growanimate ());            $await (Flowanimate ());            $await (Moveanimate ());            Textanimate (). Start ();        $await (Jumpanimate ());        }));    RunAsync (). Start ();    })(); </script></body>

Effect

Click to download the source code

Click to download the source code (HTML version)

Web page to girlfriend Confession and anniversary special effects