<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>妹仔♥我爱你</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
<audio autoplay="autoplay" controls="controls" loop="loop" preload="auto" style="display:none;" src="music/zyzknyy.mp3">*Your browser doesn't support HTML5!<br />Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+</audio>
<div id="mainDiv">
<div id="content">
<div id="code">
<span class="comments">/**</span><br/>
<span class="space"/><span class="comments">* I'm a programmer,</span><br/>
<span class="space"/><span class="comments">* So in this way to declare to you.</span><br/>
<span class="space"/><span class="comments">*/</span><br/>
Boy i = <span class="keyword">new</span> Boy(<span class="string">"HeiGe"</span>);<br/>
Girl u = <span class="keyword">new</span> Girl(<span class="string">"MeiZai"</span>);<br/>
<span class="comments">// I want to tell you. </span><br/>
i.love(u);<br/>
<span class="comments">// But afraid.</span><br/>
u.refuse();<br/>
<span class="comments">// I tell you the truth.</span><br/>
<span class="comments">// I have never been in love,So I worry about.</span><br/>
i.lose(u);<br/>
<span class="comments">// I know you're still a student.</span><br/>
<span class="comments">// So I've been waiting, I am confident.</span><br/>
<span class="keyword">boolean</span> isForever = <span class="keyword">true</span>;<br/>
<span class="keyword">while</span> (isForever) {<br/>
<span class="placeholder"/>i.waitFor(u);<br/>
<span class="placeholder"/><span class="comments">// I think it is an important decision</span><br/>
<span class="placeholder"/><span class="comments">// and you should think it over.</span><br/>
<span class="placeholder"><span class="comments">// And If.</span></span><br/>
<span class="placeholder" />u.accept(i);<br/>
<span class="placeholder"><span class="comments">// So.</span></span><br/>
<span class="placeholder"/>i.protectYou(u);<br/>
}<br/>
<span class="comments">// After a romantic wedding, we will live happily ever after.</span><br/>
i.marry(u);<br/>
i.liveHappilyWith(u);<br/>
</div>
<div id="loveHeart">
<canvas id="garden"></canvas>
<div id="words">
<div id="messages">
MeiZai, I have fallen in love with you for
<div id="elapseClock"></div>
</div>
<div id="loveu">
Love u forever and ever.<br/>
<div class="signature">- HeiGe</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $(document).snowfall(); });
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2015, 1, 1);
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>
</body>
</html>
h5+css+jq 实现love明信片
需积分: 50 102 浏览量
2018-12-06
11:55:39
上传
评论
收藏 4.16MB ZIP 举报
Love.zip （11个子文件） 
Love css 
default_dev.css 1KB default.css 1KB music zyzknyy.mp3 4.13MB
index.html 4KB js jquery.js 70KB functions_dev.js 4KB garden_dev.js 7KB functions.js 3KB garden.js 4KB .project 380B digital-7_mono.ttf 33KB资源评论
