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

....

....

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

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

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

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。