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

上传人:b****1 文档编号:230720 上传时间:2022-10-07 格式:DOCX 页数:36 大小:39.89KB
下载 相关 举报
HTML5jQuery制作温馨浪漫爱心表白动画特效.docx_第1页
第1页 / 共36页
HTML5jQuery制作温馨浪漫爱心表白动画特效.docx_第2页
第2页 / 共36页
HTML5jQuery制作温馨浪漫爱心表白动画特效.docx_第3页
第3页 / 共36页
HTML5jQuery制作温馨浪漫爱心表白动画特效.docx_第4页
第4页 / 共36页
HTML5jQuery制作温馨浪漫爱心表白动画特效.docx_第5页
第5页 / 共36页
点击查看更多>>
下载资源
资源描述

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

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

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

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!

=clien

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

当前位置:首页 > 考试认证 > IT认证

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1