jQuery结合HTML5制作的爱心树表白动画
HTML代码如下：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metacharset="UTF-8">
<title>程序员用HTML5制作的爱心树表白动画-柯乐义</title><basetarget="_blank"href="http://keleyi.com/keleyi/phtml/html5/"/>
<linktype="text/css"rel="stylesheet"href="http://keleyi.com/keleyi/phtml/html5/31/renxi/default.css">
<scripttype="text/javascript"src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex.min.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-parser.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-jit.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-builderbase.min.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-async.min.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-async-powerpack.min.js"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/functions.js"charset="utf-8"></script>
<scripttype="text/javascript"src="http://keleyi.com/keleyi/phtml/html5/31/renxi/love.js"charset="utf-8"></script>
<styletype="text/css">
<!--
.STYLE1{color:#666666}
-->
</style>
</head>
<body>
<divid="main">
<divid="error">本页面采用HTML5技术，目前您的浏览器无法显示，请使用支持HTML5的浏览器查看本页。</div>
<divid="wrap">
<divid="text">
<divid="code">
<p><fontcolor="#FF0000"><spanclass="say">亲爱的何文琪：</span><br>
<spanclass="say"></span><br/>
<spanclass="say">曾经，</span><br>
<spanclass="say">有一份真挚的爱情摆在我面前，</span><br/>
<spanclass="say">我没有珍惜，</span><br/>
<spanclass="say">等到我失去的时候才后悔莫及，</span><br>
<spanclass="say">人世间最痛苦的事莫过于此......</span><br>
<spanclass="say">如果上天能够给我一个再来一次的机会，</span><br>
<spanclass="say">我会对那个女孩子说六个字：</span><br>
<spanclass="say">何文琪我爱你！</span><br/>
<spanclass="say">如果非要在这份爱上加一个期限，</span><br>
<spanclass="say">我希望是.....</span><br>
<spanclass="say">一万年！</span><br/>
<spanclass="say"><spanclass="space"></span>--爱你的柯乐义--</span>
</font></p>
</div>
</div>
<divid="clock-box">
<scripttype="text/javascript"src="/kineryi/js/gggg336x280a.js"></script>
</div>
<canvasid="keleyi"width="1100"height="680"></canvas>
</div>
</div>
<script>
(function(){
varcanvas=$('#ke'+'leyi');
if(!canvas[0].getContext){
$("#error").show();
returnfalse;}
varwidth=canvas.width();
varheight=canvas.height();
canvas.attr("width",width);
canvas.attr("height",height);
varopts={
seed:{
x:width/2-20,
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,80]
]],
[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,
}
}
vartree=newTree(canvas[0],width,height,opts);
varseed=tree.seed;
varfoot=tree.footer;
varhold=1;
canvas.click(function(e){
varoffset=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){
varoffset=canvas.offset(),x,y;
x=e.pageX-offset.left;
y=e.pageY-offset.top;
canvas.toggleClass('hand',seed.hover(x,y));
});
varseedAnimate=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));
}
}));
vargrowAnimate=eval(Jscex.compile("async",function(){
do{
tree.grow();
$await(Jscex.Async.sleep(10));
}while(tree.canGrow());
}));
varflowAnimate=eval(Jscex.compile("async",function(){
do{
tree.flower(2);
$await(Jscex.Async.sleep(10));
}while(tree.canFlower());
}));
varmoveAnimate=eval(Jscex.compile("async",function(){
tree.snapshot("p1",240,0,610,680);
while(tree.move("p1",500,0)){
foot.draw();
$await(Jscex.Async.sleep(10));
}
foot.draw();
tree.snapshot("p2",500,0,610,680);
//会有闪烁不得意这样做,(＞﹏＜)
canvas.parent().css("background","url("+tree.toDataURL('image/png')+")");
canvas.css("background","#ffe");
$await(Jscex.Async.sleep(300));
canvas.css("background","none");
}));
varjumpAnimate=eval(Jscex.compile("async",function(){
varctx=tree.ctx;
while(true){
tree.ctx.clearRect(0,0,width,height);
tree.jump();
foot.draw();
$await(Jscex.Async.sleep(25));
}
}));
vartextAnimate=eval(Jscex.compile("async",function(){
$("#code").show().typewriter();
}));
varrunAsync=eval(Jscex.compile("async",function(){
$await(seedAnimate());
$await(growAnimate());
$await(flowAnimate());
$await(moveAnimate());
textAnimate().start();
$await(jumpAnimate());
}));
runAsync().start();
})();
</script>
<divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.不支持IE8及以下浏览器。</p>
</div>
</body>
</html>