做的一个HTML表白页面_html/css_WEB-ITnose
程序员文章站
2022-05-03 08:49:46
...
页面地址: http://myspace123.qiniudn.com/love/index.html
目录文件结构:
index.html
表白 我害怕,
我会永远是那孤独的根号三。
三本身是一个多么美妙的数字,
我的这个三,
为何躲在那难看的根号下。
我多么希望自己是一个九,
因为九只需要一点点小小的运算,
便可摆脱这残酷的厄运。
我知道自己很难再看到我的太阳.
就像这无休无止的 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 = 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) + 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 " + 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.rmusics\致爱丽丝.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核实处理。
相关文章
相关视频
下一篇: php获取指定日期相差天数的方法
推荐阅读
-
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
-
做HTML静态页面时遇到的问题总结
-
使用node.js创建一个简易服务器,让本地的HTML页面可以通过localhost方式访问
-
TextView采用setText赋值之后不能立即显示在页面上的问题解决_html/css_WEB-ITnose
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose
-
requireJS在同一个HTML/JSP页面,加载不同版本的jquery_html/css_WEB-ITnose
-
小弟我的php代码和html代码在一个页面,用$.ajax给自身传值小弟我想实现修改的功能
-
如何在html的网页做发邮件的功能_html/css_WEB-ITnose
-
菜鸟关于网页设计的一个小问题,在线等答案~_html/css_WEB-ITnose
-
请问一个简单的问题_html/css_WEB-ITnose