实例介绍
【实例简介】JavaScript 表白页面 程序员专用
【实例截图】
【核心代码】
【实例截图】
【核心代码】
| <!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">*2018—05-20</span><br /> | |
| <span class="space"/><span class="comments">*/</span><br /> | |
| Boy name = <span class="keyword">Mr</span> 张振<br /> | |
| Girl name = <span class="keyword">Mrs</span> 王双<br /> | |
| 机器猫陪了大熊80年的时光！在大熊弥留之际<br /> | |
| <span class="comments">他对机器猫说:“我走之后你就回到属于你的地方吧！”</span><br /> | |
| 机器猫含着眼泪同意了大熊最后的请求！<br /> | |
| 但是当大雄死后…<br /> | |
| 机器猫用时光机回到了80年前<br /> | |
| <span class="comments"> 机器猫对小时候的大雄说:“大雄你好，我叫哆啦A梦。”</span><br /> | |
| -----人生若只如初见！<br /> | |
| <span class="placeholder"/> 如果让我选择！<br /> | |
| <span class="placeholder"/> 我还是选择去遇见你！<br /> | |
| <span class="keyword">人生之所以</span> 万分 <span class="keyword">珍贵 </span>;<br /> | |
| <span class="keyword">是因为</span> 一旦过去 <span class="keyword">将不能重来...</span>;<br /> | |
| <span class="placeholder"/><span class="comments"> 希望今生有你！</span><br /> | |
| <span class="placeholder"/><span class="comments"> 让我给你最长情的陪伴！</span><br /> | |
| <span class="placeholder"/>我现在最大的梦想！<br /> | |
| <span class="comments"> 就是可以让你幸福快乐，开心每一天！</span><br /> | |
| <br> | |
| <br> | |
| I want to say:<br /> | |
| Baby, I love you forever; <br /> | |
| <span class="keyword">你我能够相见就是一种缘分，自从那一刻起，你的笑脸，你的声音，你的身影一直深埋在我的心里。这么多年来，我一直在寻找理想的爱情，渴望遇见我一生中对的人，可是没有一个人能像你那样在最初的时刻打动了我。你的影子深深刻在我的心上，你的名字就像一根看不到的线，一头系在我心间，一头攥在你手中，让我无法忘记。Do you know? 我的这段告白充满忐忑，不安，却饱含真心和勇气！;</span> <br /> | |
| </div> | |
| <div id="loveHeart"> | |
| <canvas id="garden"></canvas> | |
| <div id="words"> | |
| <div id="messages"> | |
| my sweetheart，这是你从开始走进我心里的时间，it's going to keep going！ | |
| <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(2018, 1,12); | |
| together.setHours(13); | |
| together.setMinutes(14); | |
| together.setSeconds(21); | |
| 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"> | |
| <!-- <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> --> | |
| </div> | |
| </body> | |
| </html> |
标签： IP Javascript java c t
好例子网口号：伸出你的我的手 — 分享！
相关软件
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论