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 相关文章推荐
jQuery实现表头固定效果的实例代码
May 24 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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快速查找数据库中恶意代码的方法
2015/04/01 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php实现搜索一维数组元素并删除二维数组对应元素的方法
2015/07/06 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
python自动化生成IOS的图标
2018/11/13 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python实现在一个画布上画多个子图
2020/01/19 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
什么是继承
2013/12/07 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
安全责任书怎么写
2014/07/28 职场文书
五四青年节的活动方案
2014/08/20 职场文书
2014年环保工作总结
2014/11/26 职场文书
单位政审意见范文
2015/06/04 职场文书
病房管理制度范本
2015/08/06 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
《夸父追日》教学反思
2016/02/20 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript