做的一个HTML表白页面_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:43:132660浏览
页面地址： http://myspace123.qiniudn.com/love/index.html
目录文件结构：
index.html
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表白</title><!--引入开始--><link rel="stylesheet" type="text/css" href="style/style.css"><script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="js/garden.js"></script><script type="text/javascript" src="js/functions.js"></script><!--引入结束--><audio src="musics/致爱丽丝.mp3" autoplay="autoplay">您使用的浏览器不支持HTML5!</audio> </head> <body oncontextmenu="return false" ondragstart="return false" style="zoom: 1;"><!-- 代码开始 --><div id="mainDiv"> <div id="content" style="width: 1110px; height: 625px; margin-top: 10px; margin-left: 119.5px;"> <div id="code" style="margin-top: 50px;"> <span class="comments">我害怕，</span><br> 我会永远是那孤独的根号三。<br> <span class="comments">三本身是一个多么美妙的数字，</span><br> 我的这个三，<br> <span class="comments">为何躲在那难看的根号下。</span><br> 我多么希望自己是一个九，<br> <span class="comments">因为九只需要一点点小小的运算，</span><br> 便可摆脱这残酷的厄运。<br> <span class="comments">我知道自己很难再看到我的太阳.</span><br> 就像这无休无止的 1.7321...<br> <span class="comments">我不愿我的人生如此可悲。</span><br> 直到那一天，<br> <span class="comments">我看到了，</span><br> 另一个根号三。<br> <span class="comments">如此美丽无瑕，</span><br> 翩翩舞动而来，<br> <span class="comments">我们彼此相乘，</span><br> 得到那梦寐以求的数字，<br> <span class="comments">像整数一样圆满。</span><br> 我们砸碎命运的枷锁，<br> <span class="comments">轻轻舞动爱情的魔杖。</span><br> 我们的平方根，已经解开。<br> <span class="comments">我的爱，重获新生。</span><br> 我无法保证能给你童话般的世界，<br> <span class="comments">也无法保证自己能在一夜之间长大。</span><br> 但是我保证，<br> <span class="comments">你可以像公主一样永远生活在自由，幸福之中。</span><br> <br> I want to say:<br> <span class="keyword">for</span> (<span class="keyword">int</span> i=0;;i++) <span class="keyword">printf</span>("<span class="comments">I Love You!</span>");<br> <span class="keyword">爱你！</span> </span></span></span></span></span></span></div> <div id="loveHeart"> <div id="messages" style="display: block;"> <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 id="words"> </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(2001, 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 = "您使用的浏览器不支持HTML5!"; 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>
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 = "<span class=\"digit\">" + days + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> 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; } 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn