做的一个HTML表白页面_html/css_WEB-ITnose

页面地址： 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.r     
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;    }
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。
相关文章
相关视频

• html下拉菜单文字怎么变小
• HTML里怎么设置thead表头的颜色
• html5中元素能拉伸宽度吗
• html中怎么清除li黑点
• 做的一个HTML表白页面_html/css_WEB...

• 接口与抽象类01
• 类的composer自动加载机制
• composer原理与常用命令03
• composer原理与常用命令02