HTML5+jQuery制作温馨浪漫爱心表白动画特效讲课教案

巡山小妖精
917次浏览
2021年02月13日 17:48
最佳经验
本文由作者推荐

-

2021年2月13日发(作者:田子行)


精品文档







html


PUBLIC



-


//W3C//DTD


XHTML


1.0



-









-


equiv=


-

Type


-


8


< br>Transitional//EN


HTML5+jQuery< /p><p><br>制作温馨浪漫爱心表白动画特效</p><p><br>(</p><p><br>我们程 序员也有浪漫的时候</p><p><br>)</p><p><br>-</p><p><br>psd</p ><p><br>素材</p><p><br>网</p><p><br>


























精品文档



精品文档






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




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


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

< p>
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*/?>( ?:)?$$/,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


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===



< p>


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

< p>
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


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,

< p>


-


?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


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===

< p>
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


===

< br>e=;f


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

< p>
(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(

< br>length,htmlSerialize:!!mentsByTagName(

e


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

}catch(o){Expando=false}Child(b);if(Event&&ent){


Event(



false;Even t(


);TML=


type='radio'


name='radiotest'


checked='ch ecked'/>


kClone=ode(true).cloneNode(true ).d;c(function(){var


k=Element(

< br>odel=el=Width===2;Child(k).y=


nction( k){var n=



Element(


r=k


in


n;if(!r){ribute(k,


n[k]===

< p>
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

< br>f[d]}}}});({data:function(a,b){if(typeof


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

< br>f=(a,b);if(!d)return


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,

nction(a){if(tion(a))return


(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

< p>
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


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


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(

.special[e]||{};for(B=f||0;B<;B++){u=r[B];if(=== ){if(i||(ace)){f=


=null&&(B


--


,1);&&(a,u)}if(f!=


null)break}}if(===0||f!=null&&===1){if(!wn||(a,o )===false


)Ca(a,e,);delete


C[e]}}else


for(var

B=0;B<;B++){u=r[B];if(i||(ace)){(a,n,r,B);(B


--


,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


精品文档


-


-


-


-


-


-


-


-