HTML5jQuery制作温馨浪漫爱心表白动画特效.docx

1、index.htmlHTML5+jQuery制作温馨浪漫爱心表白动画特效(我们程序员也有浪漫的时候)-psd素材网font-face font-family: digit;src: url(digital-7_mono.ttf) format(truetype);/*201401-01,*2014-01-04.*/Boy name = Mr LIGirl name = Mrs ZHANG/ Fall in love river. The boy love the girl;/ They love each other.The girl loved the boy;/ AS time goes

2、on.The boy can not be separated the girl;/ At the same time.The girl can not be separated the boy;/ Both wind and snow all over the sky./ Whether on foot or 5 kilometers.The boy very happy;The girl is also very happy;/ Whether it is right now/ Still in the distant future.The boy has but one dream;/

3、The boy wants the girl could well have been happy.I want to say:Baby, I love you forever;亲爱的，这是我们相爱在一起的时光。爱你直到永永远远。- 爱你的人.var offsetX = $(#loveHeart).width() / 2;var offsetY = $(#loveHeart).height() / 2 - 55;var together = new Date();together.setFullYear(2013, 2, 28);together.setHours(20);together.s

4、etMinutes(0);together.setSeconds(0);together.setMilliseconds(0);if (!document.createElement(canvas).getContext) var msg = document.createElement(div);msg.id = errorMsg;msg.innerHTML = Your browser doesnt support HTML5!Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+; document.body.appendChild(msg

5、);$(#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()

6、;Function.jsvar $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 = $(

7、#garden); gardenCanvas = $garden0;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() + $

8、(#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 != clien