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使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
详解javascript replace高级用法
Feb 17 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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的分页功能
2007/03/21 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
jcrop基本参数一览
2013/07/16 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
javascript实现滚动条效果
2020/03/24 Javascript
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python中的asyncio代码详解
2019/06/10 Python
简单了解Python3里的一些新特性
2019/07/13 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
财务经理岗位职责
2013/11/09 职场文书
创先争优标语
2014/06/27 职场文书
授权委托书
2014/09/17 职场文书
公司离职证明标准样本
2014/10/05 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2019广播稿怎么写
2019/04/17 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers