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

上传人:b****0 文档编号:18384800 上传时间:2023-08-16 格式:DOCX 页数:52 大小:44.42KB
下载 相关 举报
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第1页
第1页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第2页
第2页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第3页
第3页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第4页
第4页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第5页
第5页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第6页
第6页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第7页
第7页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第8页
第8页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第9页
第9页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第10页
第10页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第11页
第11页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第12页
第12页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第13页
第13页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第14页
第14页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第15页
第15页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第16页
第16页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第17页
第17页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第18页
第18页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第19页
第19页 / 共52页
HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx_第20页
第20页 / 共52页
亲,该文档总共52页,到这儿已超出免费预览范围,如果喜欢就下载吧!
下载资源
资源描述

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

《HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx》由会员分享,可在线阅读,更多相关《HTML5+jQuery制作温馨浪漫爱心表白动画特效.docx(52页珍藏版)》请在冰点文库上搜索。

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

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

index.html

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

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

@font-face{

font-family:

digit;

src:

url('digital-7_mono.ttf')format("truetype");

}

/**

*2014—01-01,

*2014-01-04.

*/

Boyname=MrLI

Girlname=MrsZHANG

//Fallinloveriver.

Theboylovethegirl;

//Theyloveeachother.

Thegirllovedtheboy;

//AStimegoeson.

Theboycannotbeseparatedthegirl;

//Atthesametime.

Thegirlcannotbeseparatedtheboy;

//Bothwindandsnowalloverthesky.

//Whetheronfootor5kilometers.

Theboyveryhappy;

Thegirlisalsoveryhappy;

//Whetheritisrightnow

//Stillinthedistantfuture.

Theboyhasbutonedream;

//Theboywantsthegirlcouldwellhavebeenhappy.



Iwanttosay:


Baby,Iloveyouforever;

亲爱的,这是我们相爱在一起的时光。

爱你直到永永远远。


-爱你的人

....

....

varoffsetX=$("#loveHeart").width()/2;

varoffsetY=$("#loveHeart").height()/2-55;

vartogether=newDate();

together.setFullYear(2013,2,28);

together.setHours(20);

together.setMinutes(0);

together.setSeconds(0);

together.setMilliseconds(0);

if(!

document.createElement('canvas').getContext){

varmsg=document.createElement("div");

msg.id="errorMsg";

msg.innerHTML="Yourbrowserdoesn'tsupportHTML5!


RecommenduseChrome14+/IE9+/Firefox7+/Safari4+";

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.js

var$window=$(window),gardenCtx,gardenCanvas,$garden,garden;

varclientWidth=$(window).width();

varclientHeight=$(window).height();

$(function(){

//setupgarden

$loveHeart=$("#loveHeart");

varoffsetX=$loveHeart.width()/2;

varoffsetY=$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=newGarden(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(){

varnewWidth=$(window).width();

varnewHeight=$(window).height();

if(newWidth!

=clientWidth&&newHeight!

=clientHeight){

location.replace(location);

}

});

functiongetHeartPoint(angle){

vart=angle/Math.PI;

varx=19.5*(16*Math.pow(Math.sin(t),3));

vary=-20*(13*Math.cos(t)-5*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t));

returnnewArray(offsetX+x,offsetY+y);

}

functionstartHeartAnimation(){

varinterval=50;

varangle=10;

varheart=newArray();

varanimationTimer=setInterval(function(){

varbloom=getHeartPoint(angle);

vardraw=true;

for(vari=0;i

varp=heart[i];

vardistance=Math.sqrt(Math.pow(p[0]-bloom[0],2)+Math.pow(p[1]-bloom[1],2));

if(distance

draw=false;

break;

}

}

if(draw){

heart.push(bloom);

garden.createRandomBloom(bloom[0],bloom[1]);

}

if(angle>=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('');

vartimer=setInterval(function(){

varcurrent=str.substr(progress,1);

if(current=='<'){

progress=str.indexOf('>',progress)+1;

}else{

progress++;

}

$ele.html(str.substring(0,progress)+(progress&1?

'_':

''));

if(progress>=str.length){

clearInterval(timer);

}

},75);

});

returnthis;

};

})(jQuery);

functiontimeElapse(date){

varcurrent=Date();

varseconds=(Date.parse(current)-Date.parse(date))/1000;

vardays=Math.floor(seconds/(3600*24));

seconds=seconds%(3600*24);

varhours=Math.floor(seconds/3600);

if(hours<10){

hours="0"+hours;

}

seconds=seconds%3600;

varminutes=Math.floor(seconds/60);

if(minutes<10){

minutes="0"+minutes;

}

seconds=seconds%60;

if(seconds<10){

seconds="0"+seconds;

}

varresult=""+days+"days"+hours+"hours"+minutes+"minutes"+seconds+"seconds";

$("#elapseClock").html(result);

}

functionshowMessages(){

adjustWordsPosition();

$('#messages').fadeIn(5000,function(){

showLoveU();

});

}

functionadjustWordsPosition(){

$('#words').css("position","absolute");

$('#words').css("top",$("#garden").position().top+195);

$('#words').css("left",$("#garden").position().left+70);

}

functionadjustCodePosition(){

$('#code').css("margin-top",($("#garden").height()-$("#code").height())/2);

}

functionshowLoveU(){

$('#loveu').fadeIn(3000);

}

Garden.js

functionVector(x,y){

this.x=x;

this.y=y;

};

Vector.prototype={

rotate:

function(theta){

varx=this.x;

vary=this.y;

this.x=Math.cos(theta)*x-Math.sin(theta)*y;

this.y=Math.sin(theta)*x+Math.cos(theta)*y;

returnthis;

},

mult:

function(f){

this.x*=f;

this.y*=f;

returnthis;

},

clone:

function(){

returnnewVector(this.x,this.y);

},

length:

function(){

returnMath.sqrt(this.x*this.x+this.y*this.y);

},

subtract:

function(v){

this.x-=v.x;

this.y-=v.y;

returnthis;

},

set:

function(x,y){

this.x=x;

this.y=y;

returnthis;

}

};

functionPetal(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(){

varctx=this.bloom.garden.ctx;

varv1,v2,v3,v4;

v1=newVector(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;

}

}

}

functionBloom(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);

}

Bloom.prototype={

draw:

function(){

varp,isfinished=true;

this.garden.ctx.save();

this.garden.ctx.translate(this.p.x,this.p.y);

for(vari=0;i

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 工作范文 > 行政公文

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2