html 爱心树,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下:
复制代码 代码如下:
程序员用HTML5制作的爱心树表白动画- 柯乐义
亲爱的何文琪:
曾经,
有一份真挚的爱情摆在我面前,
我没有珍惜,
等到我失去的时候才后悔莫及,
人世间最痛苦的事莫过于此......
如果上天能够给我一个再来一次的机会,
我会对那个女孩子说六个字:
何文琪我爱你!
如果非要在这份爱上加一个期限,
我希望是.....
一万年!
-- 爱你的柯乐义--
(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();
})();
适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
您可能感兴趣的文章:间断输出文字的批处理[表白我爱的人是你字样的文字]
jquery+html5烂漫爱心表白动画代码分享
技术男用来对妹子表白的百度首页
使用C语言编写圣诞表白程序
程序员的表白神器“520”大声喊出来
今天你说520了吗?不仅有php表白书还有java表白神器
Java版给爱人表白的玫瑰花程序代码
Java实现表白小程序
html 爱心树,jQuery结合HTML5制作的爱心树表白动画相关推荐
- html5爱情树怎么修改,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- html5表白树效果图,jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾 ...
- 用c语言编写动态爱心树表白,程序员用HTML5制作的爱心树表白动画
HTML代码如下: 程序员用HTML5制作的爱心树表白动画- 柯乐义 本页面采用HTML5技术,目前您的浏览器无法显示,请使用支持HTML5的浏览器查看本页. 亲爱的何文琪: 曾经, 有一份真挚的爱情 ...
- HTML5+jQuery制作温馨浪漫爱心表白动画特效
原文地址为: HTML5+jQuery制作温馨浪漫爱心表白动画特效 原文:HTML5+jQuery制作温馨浪漫爱心表白动画特效 html5相关代码下载:http://www.zuidaima.com/ ...
- 用html语言制作表白动画,HTML5 Canvas程序员经典爱情表白动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var $window = $(window), gardenCtx, gardenCanvas, $gar ...
- 【HTML】浪漫程序员 HTML5爱心表白动画
我们程序员在追求爱情方面也是非常浪漫的,下面是一位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心 ...
- js,jquery,css,html5特效
js,jquery,css,html5特效 包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
- 电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享,HTML5制作简单画板
复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...
- css3+jQuery制作导航菜单(带动画效果)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
最新文章
- linux看到的分区重复,找到了linux分区顺序错乱修复方法
- leetcode算法题--删除一次得到子数组最大和★
- npm run build,start
- 鸿蒙3部曲先看哪部,讨论雪鹰与鸿蒙三部曲的关系
- 【OpenCV】OpenCV函数精讲之 -- 命名空间
- IndexAction.java (Java之负基础实战)
- 大数据用kettle还是python_Kettle学习系列之Kettle能做什么?(三)
- Ubuntu18.04设置系统默认音频设备:使用pavucontrol命令
- houdini 粒子
- 卡耐基梅隆 同济大学 计算机,2019上海软科世界一流学科排名土木工程专业排名卡耐基梅隆大学排名第201-300...
- 无需重装系统,Windows Server 2019系统硬盘无损从MBR转换为GPT格式
- 李福攀:Kata安全容器在蚂蚁集团的应用实践
- 【思前享后】区块链架构与特点
- 微信小程序中wxml中用data-id传出的数据在js中的获取方法
- 【XML】dom4j解析
- 积性函数欧拉函数莫比乌斯函数
- 自行车比赛(新版dpc++)
- Java数据结构探索
- python绘制梅尔谱图_Python入门到底有多简单(三):填充数据
- python创建socket对象_python socket对象内建方法
热门文章
- 基于微信小程序音乐播放器的设计与实现毕业设计源码271156
- Aruco物体定位(追踪)在UE4中的实现
- SonarQube速查手册
- 微软亚洲研究院 (MSRA) 的实习体验如何?
- deepin 20 推荐邮件客户端 Bluemail 邮箱
- UNI-APP,动态设置view的背景图片
- 艾司博讯:拼多多推广计划点击价格设置
- 禁用Insert按键
- caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
- iOS10.3正式版发布:iOS10.3新功能有哪些? 韩俊强的博客