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 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
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
header()函数使用说明
2006/11/23 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
python django model联合主键的例子
2019/08/06 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python如何重新加载模块
2020/07/29 Python
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
联谊活动策划书
2014/01/26 职场文书
无传销社区工作方案
2014/05/13 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
旷课检讨书500字
2014/10/14 职场文书
学校食堂管理制度
2015/08/04 职场文书
投资入股协议书
2016/03/22 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js