页面地址： http://myspace123.qiniudn.com/love/index.html
目录文件结构：
index.html
表白 您使用的浏览器不支持HTML5! 我害怕，
我会永远是那孤独的根号三。
三本身是一个多么美妙的数字，
我的这个三，
为何躲在那难看的根号下。
我多么希望自己是一个九，
因为九只需要一点点小小的运算，
便可摆脱这残酷的厄运。
我知道自己很难再看到我的太阳.
就像这无休无止的 1.7321...
我不愿我的人生如此可悲。
直到那一天，
我看到了，
另一个根号三。
如此美丽无瑕，
翩翩舞动而来，
我们彼此相乘，
得到那梦寐以求的数字，
像整数一样圆满。
我们砸碎命运的枷锁，
轻轻舞动爱情的魔杖。
我们的平方根，已经解开。
我的爱，重获新生。
我无法保证能给你童话般的世界，
也无法保证自己能在一夜之间长大。
但是我保证，
你可以像公主一样永远生活在自由，幸福之中。
I want to say:
for (int i=0;;i++) printf("I Love You!");
爱你！ 爱你直到永永远远。
- 谢超然作
jquery\jquery-1.8.3.min.js
js\functions.js
var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;var clientWidth = $(window).width();var clientHeight = $(window).height();$(function () { // setup garden $loveHeart = $("#loveHeart"); var offsetX = $loveHeart.width() / 2; var offsetY = $loveHeart.height() / 2 - 55; $garden = $("#garden"); gardenCanvas = $garden[0]; gardenCanvas.width = $("#loveHeart").width(); gardenCanvas.height = $("#loveHeart").height() gardenCtx = gardenCanvas.getContext("2d"); gardenCtx.globalCompositeOperation = "lighter"; garden = new Garden(gardenCtx, gardenCanvas); $("#content").css("width", $loveHeart.width() + $("#code").width()); $("#content").css("height", Math.max($loveHeart.height(), $("#code").height())); $("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10)); $("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10)); // renderLoop setInterval(function () { garden.render(); }, Garden.options.growSpeed);});$(window).resize(function() { var newWidth = $(window).width(); var newHeight = $(window).height(); if (newWidth != clientWidth && newHeight != clientHeight) { location.replace(location); }});function getHeartPoint(angle) { var t = angle / Math.PI; var x = 19.5 * (16 * Math.pow(Math.sin(t), 3)); var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); return new Array(offsetX + x, offsetY + y);}function startHeartAnimation() { var interval = 50; var angle = 10; var heart = new Array(); var animationTimer = setInterval(function () { var bloom = getHeartPoint(angle); var draw = true; for (var i = 0; i < heart.length; i++) { var p = heart[i]; var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2)); if (distance < Garden.options.bloomRadius.max * 1.3) { draw = false; break; } } if (draw) { heart.push(bloom); garden.createRandomBloom(bloom[0], bloom[1]); } if (angle >= 30) { clearInterval(animationTimer); showMessages(); } else { angle += 0.2; } }, interval);}(function($) { $.fn.typewriter = function() { this.each(function() { var $ele = $(this), str = $ele.html(), progress = 0; $ele.html(''); var timer = setInterval(function() { var current = str.substr(progress, 1); if (current == '<') { progress = str.indexOf('>', progress) + 1; } else { progress++; } $ele.html(str.substring(0, progress) + (progress & 1 ? '_' : '')); if (progress >= str.length) { clearInterval(timer); } }, 75); }); return this; };})(jQuery);function timeElapse(date){ var current = Date(); var seconds = (Date.parse(current) - Date.parse(date)) / 1000; var days = Math.floor(seconds / (3600 * 24)); seconds = seconds % (3600 * 24); var hours = Math.floor(seconds / 3600); if (hours < 10) { hours = "0" + hours; } seconds = seconds % 3600; var minutes = Math.floor(seconds / 60); if (minutes < 10) { minutes = "0" + minutes; } seconds = seconds % 60; if (seconds < 10) { seconds = "0" + seconds; } var result = "" + days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds"; $("#elapseClock").html(result);}function showMessages() { adjustWordsPosition(); $('#messages').fadeIn(5000, function() { showLoveU(); });}function adjustWordsPosition() { $('#words').css("position", "absolute"); $('#words').css("top", $("#garden").position().top + 195); $('#words').css("left", $("#garden").position().left + 70);}function adjustCodePosition() { $('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);}function showLoveU() { $('#loveu').fadeIn(3000);} js\garden.js
function Vector(x, y) { this.x = x; this.y = y; }; Vector.prototype = { rotate: function (theta) { var x = this.x; var y = this.y; this.x = Math.cos(theta) * x - Math.sin(theta) * y; this.y = Math.sin(theta) * x + Math.cos(theta) * y; return this; }, mult: function (f) { this.x *= f; this.y *= f; return this; }, clone: function () { return new Vector(this.x, this.y); }, length: function () { return Math.sqrt(this.x * this.x + this.y * this.y); }, subtract: function (v) { this.x -= v.x; this.y -= v.y; return this; }, set: function (x, y) { this.x = x; this.y = y; return this; } }; function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) { this.stretchA = stretchA; this.stretchB = stretchB; this.startAngle = startAngle; this.angle = angle; this.bloom = bloom; this.growFactor = growFactor; this.r = 1; this.isfinished = false; //this.tanAngleA = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle)); //this.tanAngleB = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle)); } Petal.prototype = { draw: function () { var ctx = this.bloom.garden.ctx; var v1, v2, v3, v4; v1 = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle)); v2 = v1.clone().rotate(Garden.degrad(this.angle)); v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA); v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB); ctx.strokeStyle = this.bloom.c; ctx.beginPath(); ctx.moveTo(v1.x, v1.y); ctx.bezierCurveTo(v3.x, v3.y, v4.x, v4.y, v2.x, v2.y); ctx.stroke(); }, render: function () { if (this.r <= this.bloom.r) { this.r += this.growFactor; // / 10; this.draw(); } else { this.isfinished = true; } } } function Bloom(p, r, c, pc, garden) { this.p = p; this.r = r; this.c = c; this.pc = pc; this.petals = []; this.garden = garden; this.init(); this.garden.addBloom(this); } Bloom.prototype = { draw: function () { var p, isfinished = true; this.garden.ctx.save(); this.garden.ctx.translate(this.p.x, this.p.y); for (var i = 0; i < this.petals.length; i++) { p = this.petals[i]; p.render(); isfinished *= p.isfinished; } this.garden.ctx.restore(); if (isfinished == true) { this.garden.removeBloom(this); } }, init: function () { var angle = 360 / this.pc; var startAngle = Garden.randomInt(0, 90); for (var i = 0; i < this.pc; i++) { this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), startAngle + i * angle, angle, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this)); } } } function Garden(ctx, element) { this.blooms = []; this.element = element; this.ctx = ctx; } Garden.prototype = { render: function () { for (var i = 0; i < this.blooms.length; i++) { this.blooms[i].draw(); } }, addBloom: function (b) { this.blooms.push(b); }, removeBloom: function (b) { var bloom; for (var i = 0; i < this.blooms.length; i++) { bloom = this.blooms[i]; if (bloom === b) { this.blooms.splice(i, 1); return this; } } }, createRandomBloom: function (x, y) { this.createBloom(x, y, Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max), Garden.randomrgba(Garden.options.color.rmin, Garden.options.color.rmax, Garden.options.color.gmin, Garden.options.color.gmax, Garden.options.color.bmin, Garden.options.color.bmax, Garden.options.color.opacity), Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max)); }, createBloom: function (x, y, r, c, pc) { new Bloom(new Vector(x, y), r, c, pc, this); }, clear: function () { this.blooms = []; this.ctx.clearRect(0, 0, this.element.width, this.element.height); } } Garden.options = { petalCount: { min: 8, max: 15 }, petalStretch: { min: 0.1, max: 3 }, growFactor: { min: 0.1, max: 1 }, bloomRadius: { min: 8, max: 10 }, density: 10, growSpeed: 1000 / 60, color: { rmin: 128, rmax: 255, gmin: 0, gmax: 128, bmin: 0, bmax: 128, opacity: 0.1 }, tanAngle: 60 }; Garden.random = function (min, max) { return Math.random() * (max - min) + min; }; Garden.randomInt = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }; Garden.circle = 2 * Math.PI; Garden.degrad = function (angle) { return Garden.circle / 360 * angle; }; Garden.raddeg = function (angle) { return angle / Garden.circle * 360; }; Garden.rgba = function (r, g, b, a) { return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')'; }; Garden.randomrgba = function (rmin, rmax, gmin, gmax, bmin, bmax, a) { var r = Math.round(Garden.random(rmin, rmax)); var g = Math.round(Garden.random(gmin, gmax)); var b = Math.round(Garden.random(bmin, bmax)); var limit = 5; if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) { return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a); } else { return Garden.rgba(r, g, b, a); } }; musics\致爱丽丝.mp3
致爱丽丝--贝多芬
style\style.css
@font-face { font-family: digit; src: url('digital-7_mono.ttf') format("truetype");}ul#wimoban_nav { padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1; }ul#wimoban_nav li{ float:left; display:inline; margin:10px; }ul#wimoban_nav li a{ display:block; font-size:16px; }ul#wimoban_nav li a,#wimoban_p,#wimoban_p a{ color:#000; font-family:"微软雅黑"; }ul#wimoban_nav li a:hover,#wimoban_p a:hover{ color:red; }#wimoban_p{ text-align:center; font-size:14px; clear:both; }body{ margin:0; padding:0; background:#ffe; font-size:12px; overflow:auto; }#mainDiv{ width:100%; height:100%; }#loveHeart { float:left; width:670px; height:625px; }#garden { width:100%; height:100%; }#elapseClock { text-align:right; font-size:18px; margin-top:10px; margin-bottom:10px; }#words { font-family:"sans-serif"; width:500px; font-size:24px; color:#666; }#messages{ display:none; }#elapseClock .digit { font-family:"digit"; font-size:36px; }#loveu { padding:5px; font-size:22px; margin-top:80px; margin-right:120px; text-align:right; display:none; }#loveu .signature { margin-top:10px; font-size:20px; font-style:italic; }#clickSound { display:none; }#code { float: left; width: 440px; height: 400px; color: #333; font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", "sans-serif"; font-size: 14px; }#code .string { color:#2a36ff; }#code .keyword{ color:#7f0055; font-weight:bold; }#code .placeholder{ margin-left:15px; }#code .space { margin-left:7px; }#code .comments { color: rgb(128,128,192); }#copyright { margin-top:10px; text-align:center; width:100%; color:#666; }#errorMsg { width:100%; text-align:center; font-size:24px; position:absolute; top:100px; left:0; }#copyright a { color:#666; }