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

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 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;/ 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.setMinutes(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);$(#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();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 = $(#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() + $(#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 = hearti;var distance = Math.sqrt(Math.pow(p0 - bloom0, 2) + Math.pow(p1 - bloom1, 2);if (distance = 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 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 = + 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);Garden.js function Vector(x, y) this.x = x; this.y = y; ; Vtotype = 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); Ptotype = 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); Btotype = 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.petalsi; 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; Gtotype = render: function () for (var i = 0; i this.blooms.length; i+) this.bloomsi.draw(); , addBloom: function (b) this.blooms.push(b); , removeBloom: function (b) var bloom; for (var i = 0; i this.blooms.length; i+) bloom = this.bloomsi; 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); ;Jquery.js(function(A,w)function ma()if(!c.isReady)trys.documentElement.doScroll(left)catch(a)setTimeout(ma,1);returnc.ready()function Qa(a,b)b.src?c.ajax(url:b.src,async:false,dataType:script):c.globalEval(b.text|b.textContent|b.innerHTML|);b.parentNode&b.parentNode.removeChild(b)function X(a,b,d,f,e,j)var i=a.length;if(typeof b=object)for(var o in b)X(a,o,bo,f,e,d);return aif(d!=w)f=!j&f&c.isFunction(d);for(o=0;oi;o+)e(ao,b,f?d.call(ao,o,e(ao,b):d,j);return areturn i?e(a0,b):wfunction J()return(new Date).getTime()function Y()return falsefunction Z()return truefunction na(a,b,d)d0.type=a;return c.event.handle.apply(b,d)function oa(a)var b,d=,f=,e=arguments,j,i,o,k,n,r;i=c.data(this,events);if(!(a.liveFired=this|!i|!i.live|a.button&a.type=click)a.liveFired=this;var u=i.live.slice(0);for(k=0;ku.length;k+)i=uk;i.origType.replace(O,)=a.type?f.push(i.selector):u.splice(k-,1)j=c(a.target).closest(f,a.currentTarget);n=0;for(r=j.length;nr;n+)for(k=0;ku.length;k+)i=uk;if(jn.selector=i.selector)o=jn.elem;f=null;if(i.preType=mouseenter|i.preType=mouseleave)f=c(a.relatedTarget).closest(i.selector)0;if(!f|f!=o)d.push(elem:o,handleObj:i)n=0;for(r=d.length;nr;n+)j=dn;a.currentTarget=j.elem;a.data=j.handleObj.data;a.handleObj=j.handleObj;if(j.handleObj.origHandler.apply(j.elem,e)=false)b=false;breakreturn bfunction pa(a,b)returnlive.+(a&a!=*?a+.:)+b.replace(/./g,).replace(/ /g,&)function qa(a)return!a|!a.parentNode|a.parentNode.nodeType=11function ra(a,b)var d=0;b.each(function()if(this.nodeName=(ad&ad.nodeName)var f=c.data(ad+),e=c.data(this,f);if(f=f&f.events)delete e.handle;e.events=;for(var j in f)for(var i in fj)c.event.add(this,j,fji,fji.data)function sa(a,b,d)var f,e,j;b=b&b0?b0.ownerDocument|b0:s;if(a.length=1&typeof a0=string&a0.length512&b=s&!ta.test(a0)&(c.support.checkClone|!ua.test(a0)e=true;if(j=c.fragmentsa0)if(j!=1)f=jif(!f)f=b.createDocumentFragment();c.clean(a,b,f,d)if(e)c.fragmentsa0=j?f:1;returnfragment:f,cacheable:efunction K(a,b)var d=;c.each(va.concat.apply(,va.slice(0,b),function()dthis=a);return dfunction wa(a)returnscrollToin a&a.document?a:a.nodeType=9?a.defaultView|a.parentWindow:falsevar c=function(a,b)return new c.fn.init(a,b),Ra=A.jQuery,Sa=A.$,s=A.document,T,Ta=/*()*$|#(w-+)$/,Ua=/.:#.,*$/,Va=/S/,Wa=/(s|u00A0)+|(s|u00A0)+$/g,Xa=/(?:)?$/,P=navigator.userAgent,xa=false,Q=,L,$=Ototype.toString,aa=Ototype.hasOwnProperty,ba=Atotype.push,R=Atotype.slice,ya=Atotype.indexOf;c.fn=totype=init:function(a,b)var d,f;if(!a)return this;if(a.nodeType)this.context=this0=a;this.length=1;return thisif(a=body&!b)this.context=s;this0=s.body;this.selector=body;this.length=1;return thisif(typeof a=string)if(d=Ta.exec(a)&(d1|!b)if(d1)f=b?b.ownerDocument|b:s;if(a=Xa.exec(a)if(c.isPlainObject(b)a=s.createElement(a1);c.fn.attr.call(a,b,true)else a=f.createElement(a1);elsea=sa(d1,f);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodesreturn c.merge(this,a)elseif(b=s.getElementById(d2)if(b.id!=d2)return T.find(a);this.length=1;this0=bthis.context=s;this.selector=a;return thiselse if(!b&/w+$/.test(a)this.selector=a;this.context=s;a=s.getElementsByTagName(a);retur