jQuery结合HTML5制作的爱心树表白动画


Posted in Javascript onFebruary 01, 2015

HTML代码如下:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" >

<title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/html5/" /> 

<link type="text/css" rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/31/renxi/default.css">

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-parser.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-jit.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-builderbase.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-async.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/jscex-async-powerpack.min.js"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/functions.js" charset="utf-8"></script>

<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/html5/31/renxi/love.js" charset="utf-8"></script>

<style type="text/css">

<!--

.STYLE1 {color: #666666}

-->

</style>

</head>

<body>

<div id="main">

<div id="error">本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页。</div>

<div id="wrap">

<div id="text">

<div id="code">

<p> <font color="#FF0000"> <span class="say">亲爱的何文琪:</span><br>

<span class="say"></span><br />

<span class="say">曾经,</span><br>

<span class="say">有一份真挚的爱情摆在我面前,</span><br />

<span class="say">我没有珍惜,</span><br /> 

<span class="say">等到我失去的时候才后悔莫及,</span><br>    

<span class="say">人世间最痛苦的事莫过于此......</span><br>

<span class="say">如果上天能够给我一个再来一次的机会,</span><br>

<span class="say">我会对那个女孩子说六个字:</span><br>

<span class="say">何文琪我爱你!</span><br />

<span class="say">如果非要在这份爱上加一个期限,</span><br>

<span class="say">我希望是..... </span><br>

<span class="say">一万年!</span><br />

<span class="say"><span class="space"></span> -- 爱你的柯乐义--</span>

</font></p>

</div>

</div>

<div id="clock-box">

<script type="text/javascript" src="/kineryi/js/gggg336x280a.js"></script>

</div>

<canvas id="keleyi" width="1100" height="680"></canvas>

</div>

</div>

<script>

(function(){

var canvas = $('#ke'+'leyi');

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 - 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,

}

}

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", 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");

}));

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 () {

$("#code").show().typewriter();

}));

var runAsync = eval(Jscex.compile("async", function () {

$await(seedAnimate());

$await(growAnimate());

$await(flowAnimate());

$await(moveAnimate());

textAnimate().start();

$await(jumpAnimate());

}));

runAsync().start();

})();

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

</div>

</body>

</html>
Javascript 相关文章推荐
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
js继承实现方法详解
Dec 16 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 #Javascript
JavaScript插件化开发教程(六)
Feb 01 #Javascript
JavaScript插件化开发教程(五)
Feb 01 #Javascript
对JavaScript中this指针的新理解分享
Jan 31 #Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 #Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 #Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
ajax 的post方法实例(带循环)
2011/07/04 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python实现的快速排序算法详解
2017/08/01 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python 显示数组全部元素的方法
2018/04/19 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
写给女生的道歉信
2014/01/14 职场文书
优秀求职信范文分享
2014/01/26 职场文书
银行优秀员工事迹
2014/02/06 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
项目战略合作意向书
2015/05/08 职场文书