HTML5+jQuery制作温馨浪漫爱心表白动画特效讲课教案
-
精品文档
html
PUBLIC
-
//W3C//DTD
XHTML
1.0
-
-
equiv=
-
Type
-
8
< br>Transitional//EN
制作温馨浪漫爱心表白动画特效
(
我们程
序员也有浪漫的时候
)
-
psd
素材
网
精品文档
精品文档
var $$window = $$(window),
gardenCtx, gardenCanvas, $$garden,
garden;
var clientWidth =
$$(window).width();
var
clientHeight = $$(window).height();
$$(function () {
// setup garden
$$loveHeart = $$(
var offsetX = $$() / 2;
var offsetY = $$() / 2
-
55;
$$garden = $$(
gardenCanvas = $$garden[0];
= $$(
= $$(
gardenCtx = text(
CompositeOperation =
garden = new Garden(gardenCtx,
gardenCanvas);
$$(
$$(
$$(
-
top
(($$()
-
$$(
/
2,
10));
$$(
-
le
ft
(($$()
-
$$(
/
2,
10));
// renderLoop
setInterval(function () {
();
},
eed);
});
$$(window).resize(function()
{
var newWidth =
$$(window).width();
var
newHeight = $$(window).height();
if (newWidth != clientWidth &&
newHeight != clientHeight) {
e(location);
}
});
function
getHeartPoint(angle) {
var t = angle /
精品文档
精品文档
var x = 19.5 * (16 * ((t),
3));
var y =
-
20 * (13 * (t)
-
5 * (2 * t)
-
2 * (3 * t)
-
(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 < i++) {
var p =
heart[i];
var
distance
=
((p[0]
-
bloom[0],
2)
+
(p[1]
-
bloom[1],
2));
if (distance < * 1.3)
{
draw = false;
break;
}
}
if (draw)
{
(bloom);
RandomBloom(bloom[0],
bloom[1]);
}
if (angle >= 30) {
cle
arInterval(animationTimer);
showMessages();
} else {
angle += 0.2;
}
}, interval);
}
(function($$) {
$$.iter = function() {
(function()
{
var $$ele = $$(this), str = $$(), progress
= 0;
$$('');
var
timer = setInterval(function() {
var current = (progress, 1);
if (current == '<') {
progress = f('>', progress)
+ 1;
} else
{
精品文档
精品文档
progress++;
}
$$(ing(0,
progress) + (progress & 1 ? '_' : ''));
if (progress >= ) {
clearInterval(timer);
}
}, 75);
});
return
this;
};
})(jQuery);
function timeElapse(date){
var current =
Date();
var
seconds = ((current)
-
(date)) / 1000;
var days = (seconds / (3600 *
24));
seconds =
seconds % (3600 * 24);
var hours = (seconds /
3600);
if (hours
< 10) {
hours =
}
seconds = seconds % 3600;
var minutes = (seconds /
60);
if (minutes
< 10) {
minutes =
}
seconds = seconds % 60;
if (seconds < 10)
{
seconds =
}
var
result =
seconds +
$$(
}
function showMessages() {
adjustWordsPosition();
$$('#messages').fadeIn(5000,
function() {
showLoveU();
});
}
function
adjustWordsPosition() {
精品文档
精品文档
$$('#words').css(
$$('#words').css(
$$('#words').css(
}
function adjustCodePosition()
{
$$('#code').css
(
-
top
-
$$(
}
function showLoveU() {
$$('#loveu').fadeIn(3000);
}
精品文档
精品文档
function Vector(x, y)
{
this.x = x;
this.y = y;
};
ype = {
rotate: function (theta) {
var x = this.x;
var
y = this.y;
this.x =
(theta) * x
-
(theta) *
y;
this.y = (theta) * x +
(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 (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) {
hA
= stretchA;
hB =
stretchB;
ngle =
startAngle;
精品文档
精品文档
=
angle;
=
bloom;
ctor = growFactor;
this.r = 1;
shed = false;
//leA
=
(
-
(le),
(le));
//leB
=
(
-
(le),
(le));
}
ype
= {
draw: function
() {
var
ctx =
var
v1, v2, v3, v4;
v1
= new Vector(0, this.r).rotate((ngle));
v2 =
().rotate(());
v3
= ().mult(hA); //.rotate(leA);
v4 = ().mult(hB);
//.rotate(leB);
Style = .c;
ath();
(v1.x, v1.y);
CurveTo(v3.x, v3.y, v4.x, v4.y, v2.x,
v2.y);
();
},
render: function () {
if (this.r <= .r)
{
this.r += ctor;
// / 10;
();
}
else {
shed = true;
}
}
}
function Bloom(p, r, c, pc, garden)
{
this.p =
p;
this.r =
r;
this.c =
c;
=
pc;
=
[];
=
garden;
();
om(this);
}
精品文档
精品文档
ype
= {
draw: function
() {
var
p, isfinished = true;
();
ate(this.p.x, this.p.y);
for (var i = 0; i < i++)
{
p =
[i];
();
isfinished *= shed;
}
e();
if
(isfinished == true) {
Bloom(this);
}
},
init: function () {
var angle = 360 /
;
var startAngle
= Int(0, 90);
for
(var i = 0; i < i++) {
(new
Petal((,
),
(,
),
startAngle
+
i
*
angle,
angle,
(,
), this));
}
}
}
function Garden(ctx, element)
{
=
[];
t =
element;
=
ctx;
}
ype
= {
render:
function () {
for
(var i = 0; i < i++) {
[i].draw();
}
},
addBloom: function (b) {
(b);
},
removeBloom: function (b) {
var bloom;
精品文档
精品文档
for
(var i = 0; i < i++) {
bloom = [i];
if (bloom === b) {
(i, 1);
return this;
}
}
},
createRandomBloom: function (x, y)
{
Bloom(x,
y,
Int(,
),
rgba(,
,
,
,
,
,
y),
Int(, ));
},
createBloom: function (x, y, r, c, pc)
{
new Bloom(new
Vector(x, y), r, c, pc, this);
},
clear: function () {
= [];
ect(0, 0, , );
}
}
s = {
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
};
=
function (min, max) {
return () * (max
-
min) + min;
};
Int = function
(min, max) {
return (() *
(max
-
min + 1)) +
min;
};
= 2 *
=
function (angle) {
return / 360 * angle;
};
= function
(angle) {
return angle /
* 360;
};
= function (r, g, b, a) {
return 'rgba(' + r + ',' + g + ',' + b
+ ',' + a + ')';
};
rgba = function
(rmin, rmax, gmin, gmax, bmin, bmax, a)
{
var r = ((rmin, rmax));
var g = ((gmin,
gmax));
var b = ((bmin, bmax));
var limit =
5;
if ((r
-
g) <=
limit && (g
-
b) <= limit &&
(b
-
r) <= limit)
};
return (rmin, rmax, gmin, gmax, bmin,
bmax, a);
} else
{
return (r, g,
b, a);
}
精品文档
精品文档
(function(A,w){function
ma()
{if(!y){try{ll(
ady()}}function
< br>Qa(a,b){?({url:,async:false,dataType:
|TML||
X(a,b,d,f,e,j){var
i=;if(typeof
b===
o
in
b)X(a,o,b[o],f,e,d);return
a
}if(d!==w){f=!j&&f&&tion(d);for(o=0;o
n
a}return i?
e(a[0],b):w}function
J(){return(new
Date).getTime()}function
Y(){return
false}function
Z(){return
true}function
na(a,b,d){d[0].type=a;return
(b,d)}function
oa(a){var
b,d=[],f=[],e=arguments,j,i,o,k,n,r;i=(thi
s,
ton&&===
u=(0);for(k=0;k<;k
++){i=u[k];e(O,
:(k
--
< br>,1)}j=c().closest(f,tTarget);n=0;for(r=
< br>
;n
.preType===
;if(!f||f!==o)({elem:o,h
andleObj:i})}}n=0;for(r=;n
lem;=;Obj=Obj;if((,e)
===fa
lse){b=false;break}}return
b}}function
pa(a,b){return
p>
qa(a){return!a||!Node||pe===11}function
ra(a,b){var
d=0;(function(){
if(me===(a[d]&&a[d].nodeName)){var
f=(a[d++]),e=(this,f);if(f=f&&){delete
;={};for(var j in f)for(var
i
in
f[j])(this,j,f[j][i],f[j]
[i].data)}}})}function
sa(a,b,d){var
p>
f,e,j;b=b&&b[0]?b[0].ownerDocument||b[0]:
s;if(===1&&typeof
a[0]===
[0]))){e=
true;if(j=nts[a[0]])if(j!==1)f=j}if(!f)
{f=DocumentFragment();(a,b,f,d)}if(e)c.
fragments[a[0]]=j?f:1;return{fragment:f,cacheable:
e}}function
K(a,b){var
d={};
(([],(0,b)),function(){d[this]=a});return
d}function
wa(a){return
a&&nt?a:pe===9?tView||Window:false}var
c=function(a,b){return
new <
/p>
(a,b)},Ra=,Sa=A.$$,s=nt,T,Ta=/^[^<]*(<[wW
]+>)[^>]*$$|^#([w
-
]+)$$/,Ua
=/^.[^:#[.,]*$$/,Va=/S/,
Wa=/^(s|u00A0)+|(s|u00A0)+$$/g,Xa=/^<(w+)s*/?>(
?:1>)?$$/,P=ent,xa
=false,Q=[],L,$$=ng,a
a=Property,ba=
,R=,ya=f;=ype={init:funct
ion(a,b)
{var
d,f;if(!a)return
this;if(pe){t=this[0]=a;=1;return
精品文档
精品文档
this}if(a===
this}if(typeof
a===
(d[1]||!b))if(d[1]){f=b
?ocument||b:s;if(a=(a))if(nObject(b)){a=[El
ement(a[1])];(a,b,true)}else
a=[Ele
ment(a[1])];else{a=sa([d[1]],[f]);a=(ble?ode(true)
:
ment).childNodes}return
(th
is,a)}else{if(b=mentById(d[2])){if(!==d[2])return
(a);=1;this[0]=b}t=s;or=a;return
this}else
if(!b&&/^w+$$/.test
(a)){or=a;t=s;a=mentsByTagName(a);return
(this,
a)}else
p>
return!b||?(b||T).find(a):c(b).find(a);el
se
if(tion(a))return
(a);if(or!==w){or=or;t=t}return
ray(a,this)},selector:
},toArray:fun
ction(){return
(this,0)},get:function(a){return
a==null?y():a<0?(a)[0]:this[a]},pushStack:fun
ction(a,b,d){var
f=c();y(a)?(f,a):(f,a)
;ject=this;t=t;if(b===
if(b)or=or+
f},each:fun
ction(a,b){return
(this,a,b)},ready:fun
ction(a){ady();if(y)(s,c);else
Q&&(a);return
this},eq:function(a){return
a===
-
1?(a):(a,+a+1)},first:f
unction(){return
(0)},last:function(){return
(
-
1)},slice:function(){retur
n
ack((this,arguments),
n
ack((this,
function(b,d){return
(b,d,b)}))},end:function(){return
ject||c(null)},push:ba,sort:[].sort,splice:[ ].splice};ype=;=c.f
=function(){var
a=arguments[0]||{},b=1,d=,f=false,e,j,i,o;i
f(typeof
a===
a!==
--
b}for(;b
or(j
in
e){i
=a[j];o=e[j];if(a!==o)if(f&&o&&(nObject(o)||y(o)))
{i=i&&(nObject(i)||
y(i))?i:y(o)?[]:{};a[j]=(f,i,o)}else
if(o!==w)a[j]=o}return
a};({
noConflict:function(a){A.$$=Sa;if(a)=Ra;return
c},isReady:false,ready:function(){if(!y){if
(!)return
setTimeout(,13);y=true;if(Q){for(var
p>
a,b=0;a=Q[b++];)(s,c);Q=null}rHandler&&c(
s).triggerHandler(
:function(){if(!xa){x
a=true;if(tate===
();if(ntListener){ntLi
stener(
L,false);ntListener(
if(Event){Event(
a=false;try{
a=lement==null}catch(b){}ll&&a&&ma()}}},isFunc
tion:function(a){return
$$.call(a
)===
Function]
$$.call(a)===
Array]
Object]
false;i
f(uctor&&!(a,
精品文档
精品文档
false;var
b;for(b
in
a);return
b===
w||(a,b)},isEmptyObject:function(a){for(var
b
in
a)return
false;return
true},error:function(a){throw
a;},parseJSON:function(a){if(typeof
a!==
null;a=(a);if(/^[],:{}s]*$$/
.test(e(/(?:[
-
9a
-
fA
-
F]{4})/g,
-
?d+(?:.d*)?(?:[eE][+<
/p>
-
]?d+)?/g,
g,
a))();else
(
JSON:
b=mentsByTagName(
=
=a;Before
(d,hild);Child(d)}},nodeName:function(a,b){return
me&&rCase()===rCase()},each:function(a,
b,d){var
f,e=0,j=,i=j===w||tion(a);if(d
)if(i)for(f in a){if((a[f],
d)===false)break}else
<
br>e=;f
<
br>length,htmlSerialize:!!mentsByTagName( e }catch(o){Expando=false}Child(b);if(Event&&ent){
<
br>odel=el=Width===2;Child(k).y= <
br>f[d]}}}});({data:function(a,b){if(typeof
<
br>f=(a,b);if(!d)return
nction(a){if(tion(a))return
.special[e]||{};for(B=f||0;B<;B++){u=r[B];if(===
){if(i||(ace)){f= null)break}}if(===0||f!=null&&===1){if(!wn||(a,o
)===false B=0;B<;B++){u=r[B];if(i||(ace)){(a,n,r,B);(B
for(;e
if(i)for(f
in
a){if((a[f],f,a[f])===false)break}else
for(d=a[0];e
a},trim:function(a){return(a|
|
gth==null||typeof
a===
a!==
b},inArray:function(a,b){if(f
)return
f(a);for(var
d=0,f=;d
a)return
d;return
-
1},merge:function(a,b){var
d=,f=0;if(typeof
===
for(;b[f]!==w;)a[d++]=b[f++];=d;return
a},grep:function(a,b,d){for(var
f=[],e=0,j=;e
f},map:function(a,b,d){for(var
f=[],e,j=0,i=;j
([],f)},guid:1,proxy
:function(a,b,d){if(===2)if(typeof
b===
!tion(b)){d=
b;b=w}if(!b&&a)b=function(){return
(d||
this,arguments)};if(a)==||||++;return
b
},uaMatch:function(a){a=rCase();a=/(webkit)[ /]([w
.]+)/.exec(a)||/(opera)(?:.*version
)?[
/]([w.]+)/.exec(a)||/(msie)
([w.]+)/.exec(a)||!/compatible/.test(a)&&/(mozilla
)(?:.*?
rv:([w.]+))?/.exec(a)||[];retur
n{browser:a[1]||
);if(P
.brows
er){r[P
.browser]=true;n=P
.ve
rsion}if()
=
true;if(ya)y=function(a,b){return
(b,a)};T=c(s);if(ntListener)L=function(){Eve
ntListener(
d
if(Event)L=funct
ion(){if(tate===
,L);()}};(function(){t=
{};var
a=ntElement,b=Element(
.display=
href='/a'
style='color:red;f
loat:left;opacity:.55;'>a
var
e=mentsByTagName(
精品文档
精品文档
pport={leadi
ngWhitespace:pe===3,tbody:!mentsByTagName(
at,checkOn:mentsByTagName(
Element(
parentNode:Child(C
hild(Element(
pando:true,checkClone:fals
e,scriptEval:false,noCloneEvent:true,boxModel:null
};=
script
Child);if(A[f]){Eva
l=true;delete
A[f]}try{delete
Event(
false;Even
t(
);TML=
type='radio'
name='radiotest'
checked='ch
ecked'/>
kClone=ode(true).cloneNode(true
).d;c(function(){var
k=Element(
nction(
k){var n=
Element(
r=k
in
p>
n;if(!r){ribute(k,
n[k]===
r};Bubbles=a(
)();={
lls
pacing:
Map
G=
applet:true},data:function(a,b,d){if(!(me&&
[rCase()])){a=a
==A?za:a;var
f=a[G],e=;if(!f&&typeof
b===
null;f||(f=++Ya);if(typeof
b
===
if(!e[f]){a[G]=f;e[f]={}}a=e[f];if(d
!==w)a[b]=d;return
typeof
b=
==
werCase()])){a=a==A?za:a;var
d=a[G],f=,e=f[d];if(b){if(e){delete
e[b];yObject(e)&&Data(a)}}else{if(Expando)
delete
a[o];
else
Attribute&&Attribute(o);delete
a===
(this[0]);else
if(typeof
a===
(fu
nction(){(this,a)});var
d=(
f
=rHandler(
f===w&&d[1]?(d[0]):f}else
return
r(
a,b)})},removeData:function(a){return <
/p>
(function(){Data(this,a)})}});({queue:fu
nction(a,b,d){if(a){b=(b||
queue
f||[];if(!f||y(d))f=(a,b,ray(d));else
(d);return
f}},dequeue:funct
ion(a,b){b=b||
精品文档
精品文档
d=(a,b),f=()
;if(f===
call(a,function(){e(a,b)})}}});
({queue:function(a,b){if(typeof
a!==
w)return
(this[0],a);return
(function(){var
d=(this,a,b);a===
return
(function(){e(this,a)})},delay:function(a,b
){a=?[a]||a:a;b=b||
;return
(b,function(){var
d=this;set
Timeout(function(){e(d,b)},a)})},clearQueue:functi
on(a){return
(a||
Aa=/[nt]/g,
ca=/s+/,Za=/r/g,$$a=/href|src|style/,ab=/(button|in
put)/i,bb=/(button|input|obje
ct|select|
textarea)/i,
cb=/^(a|area)$$/
i,Ba=/radio|checkbox/;({attr:function(a,b){return
X(this,a,b,true,)},removeAttr:function(
a){return
(function(){(this,a,
(function(n){var
r=c(this);s
s((this,n,(
a===
b=(a||
e=this[d];if(pe===1)if(ame){for(var
j=
i=ame,o=0,k=;o
ame=a
}return
this},removeClass:function(a){i
f(tion(a))return
(function(k){var
n=c(this);Class((this,k,(
a===
b=(a||
e=this[d];if(pe===1&&ame)i
f(a){for(var
j=(
<
/p>
ame=
this},toggleClass:function(a,b
){var
d=typeof
a,f=typeof
b===
(function(e){var
j=c(this);Class((this,e,(
(function(
){if(d===
e,j=0,i=c(this),o=b,k=(ca);e=k
[j++];){o=f?o:!ss(e);i[o?
lse
if(d===
me);ame=
<
/p>
ame||a===false?
b=0,d=;b
<
/p>
-
1)return
true;return
false},val:function(a){if(a===w){var
p>
b=this[0];if(b){if(me(b,
(me(b,
d=edIndex,f=[],e=s;b====
-
one
null;var
j=b?d:0;for(d=b?d+1:;j
e[j];if(ed){a=c(i).val();if(b)return
a;(a)}}return
f}if(()&&!n)return
ribute(
w}var
精品文档
精品文档
o=tion(a);return
(function(k){var
n=c(this),r
=a;if(pe===1){if(o)r=(this,k,());if(typeof
r===
if(me(this,
<
/p>
y(c(this).val(),u)>=0});if(!)edIndex=
-
1}else
=r}})}});({a
ttrFn:{val:true,css:true,html:true,text:true,data:
true,width:true,heigh
t:true,offset:true
},attr:function(a,b,d,f){if(!a||pe===3||pe===8)ret
urn
w;if(f&&b
in
)return
c(a)[b](d);f=pe!==1||!oc(a);var
e=d!==w;b=f&&[b]||b;if(pe===1){var
j=$$(b);if(b
in
a&&f&&!j){if(e){b===
property
can't be changed
a[b]=d}if(me(a,
ributeNode(b).nodeValue;
if(b===
&ied?:(me)||(me)&&?0:w;return
p>
a[b]}if(!&&f&&b===
t}e&&ribute(
b,
2):ribute(b);return
a===null?w:a}return
(a,b,d)}});var
O=/.(.*)$$/,db=function(a){return
e(/[^ws.|`]/g,
function(b){r
eturn
)){if(erval&&a!==A&&!lement)a=A;va
r
e,j;if(r){e=d;d=r}if(!)=++;if(j=(a)){
var
i==||{},o=;if(!o)=o=function(){return
typeof
c!==
.split
(
k,n=0,r;k=b[n++];){j=e?({},
e):{handler:d,data:f};if(f(
-
1){r=(
k=();ace=(0).sort().join(
ar
u=i[k],z=l[k]||{};if(!u){u=i[k]=[];if(!
||(a,f,r,o)===false)if(n
tListener)ntLis
tener(k,o,false);else
Event&&Event(
}(j);[k]=true}a=null}}},global:{},remove:fu
nction(a,b,d,f){if(!(p
e===3||pe===8)){v
ar e,j=0,i,o,k,n,r,u,z=(a),
C=z&&;if(z&&C){if(b&&){d=r;b=}if(!b||typeof
b===
in
C)(a,e+b)}
else{for(b=(
RegExp(
=null&&(B
--
,1);&&(a,u)}if(f!=
)Ca(a,e,);delete
C[e]}}else
for(var
--
,1)}}}if(yObject(C)){if(b=)=nu
ll;delete
;delete
;yObject(z
)&&Data(a)}}}}},trigger:function(a,b,d,f){var
e=||a;if(!f){a=typeof
精品文档
-
-
-