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 TO HTML 转换
Jun 26 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
请求时token过期自动刷新token操作
Sep 11 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.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python实现验证码识别功能
2018/06/07 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
计算机操作自荐信
2013/12/07 职场文书
业务主管岗位职责范本
2013/12/25 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
铲车司机岗位职责
2014/03/15 职场文书
一年级评语大全
2014/04/23 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
2015年女生节活动总结
2015/02/27 职场文书
2015员工年度考核评语
2015/03/25 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电