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 相关文章推荐
js静态方法与实例方法分析
Jul 04 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
js实现旋转木马效果
Mar 17 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
javaScript中indexOf用法技巧
Nov 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正则
2006/07/07 PHP
PHP 5.0 Pear安装方法
2006/12/06 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
AngularJS语法详解
2015/01/23 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
js实现加载更多功能实例
2016/10/27 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
提升Python程序性能的7个习惯
2019/04/14 Python
如何在python中实现随机选择
2019/11/02 Python
Python3连接Mysql8.0遇到的问题及处理步骤
2020/02/17 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
上课迟到检讨书100字
2014/01/11 职场文书
顶撞老师检讨书
2014/02/07 职场文书
银行职员自我鉴定
2014/04/20 职场文书
妈妈活动方案
2014/08/15 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB