jquery+html5烂漫爱心表白动画代码分享


Posted in Javascript onAugust 24, 2015

本文实例讲述了jquery+html5烂漫爱心表白动画代码。分享给大家供大家参考。具体如下:
jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白。

运行效果图:----------------------查看效果 下载源码-----------------------

jquery+html5烂漫爱心表白动画代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jquery+html5烂漫爱心表白动画代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+html5烂漫爱心表白动画</title>

<style type="text/css">
@font-face {
 font-family: digit;
 src: url('digital-7_mono.ttf') format("truetype");
}
</style>

<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

</head>

<body>

<div id="mainDiv">
 <div id="content">
 <div id="code">
  <span class="comments">/**</span><br />
  <span class="space"/><span class="comments">*2013—02-14,</span><br />
  <span class="space"/><span class="comments">*2013-02-28.</span><br />
  <span class="space"/><span class="comments">*/</span><br />
  Boy name = <span class="keyword">Mr</span> LI<br />
  Girl name = <span class="keyword">Mrs</span> ZHANG<br />
  <span class="comments">// Fall in love river. </span><br />
  The boy love the girl;<br />
  <span class="comments">// They love each other.</span><br />
  The girl loved the boy;<br />
  <span class="comments">// AS time goes on.</span><br />
  The boy can not be separated the girl;<br />
  <span class="comments">// At the same time.</span><br />
  The girl can not be separated the boy;<br />
  <span class="comments">// Both wind and snow all over the sky.</span><br />
  <span class="comments">// Whether on foot or 5 kilometers.</span><br />
  <span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
  <span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
  <span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
  <span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
  <span class="placeholder"/>The boy has but one dream;<br />
  <span class="comments">// The boy wants the girl could well have been happy.</span><br />
  <br>
  <br>
  I want to say:<br />
  Baby, I love you forever;<br />
 </div>
 <div id="loveHeart">
  <canvas id="garden"></canvas>
  <div id="words">
  <div id="messages">
   亲爱的,这是我们相爱在一起的时光。
   <div id="elapseClock"></div>
  </div>
  <div id="loveu">
   爱你直到永永远远。<br/>
   <div class="signature">- 李先生</div>
  </div>
  </div>
 </div>
 </div>
</div>

<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2013, 2, 28);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
 var msg = document.createElement("div");
 msg.id = "errorMsg";
 msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
 document.body.appendChild(msg);
 $("#code").css("display", "none")
 $("#copyright").css("position", "absolute");
 $("#copyright").css("bottom", "10px");
 document.execCommand("stop");
} else {
 setTimeout(function () {
 startHeartAnimation();
 }, 5000);

 timeElapse(together);
 setInterval(function () {
 timeElapse(together);
 }, 500);

 adjustCodePosition();
 $("#code").typewriter();
}
</script>
<div style="text-align:center;clear:both"></div>
</body>
</html>

以上就是为大家分享的jquery+html5烂漫爱心表白动画代码,希望大家可以喜欢。

Javascript 相关文章推荐
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
JavaScript表单验证实现代码
May 22 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 #Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 #Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 #Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 #Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 #Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 #Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 #Javascript
You might like
php flv视频时间获取函数
2010/06/29 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
python调用staf自动化框架的方法
2018/12/26 Python
pandas的qcut()方法详解
2019/07/06 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python安装Bs4的多种方法
2020/11/28 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
梅西百货官网:Macy’s
2020/08/04 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
五年级英语教学反思
2014/01/31 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS