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

原创
2016-06-24 11:43:13 2396浏览

页面地址: 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;    }
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。