HTML5jQuery制作温馨浪漫爱心表白动画特效文档格式.docx
- 文档编号:13161117
- 上传时间:2022-10-07
- 格式:DOCX
- 页数:36
- 大小:39.89KB
HTML5jQuery制作温馨浪漫爱心表白动画特效文档格式.docx
《HTML5jQuery制作温馨浪漫爱心表白动画特效文档格式.docx》由会员分享,可在线阅读,更多相关《HTML5jQuery制作温馨浪漫爱心表白动画特效文档格式.docx(36页珍藏版)》请在冰豆网上搜索。
styletype="
text/css"
@font-face{
font-family:
digit;
src:
url('
digital-7_mono.ttf'
)format("
truetype"
);
}
/style>
linkhref="
css/default.css"
type="
rel="
stylesheet"
scripttype="
text/javascript"
src="
js/jquery.js"
/script>
js/garden.js"
js/functions.js"
/head>
body>
divid="
mainDiv"
<
content"
<
code"
<
spanclass="
comments"
/**<
/span>
br/>
space"
/>
*2014—01-01,<
*2014-01-04.<
*/<
Boyname=<
keyword"
Mr<
LI<
Girlname=<
Mrs<
ZHANG<
//Fallinloveriver.<
Theboylovethegirl;
//Theyloveeachother.<
Thegirllovedtheboy;
//AStimegoeson.<
Theboycannotbeseparatedthegirl;
//Atthesametime.<
Thegirlcannotbeseparatedtheboy;
//Bothwindandsnowalloverthesky.<
//Whetheronfootor5kilometers.<
Theboy<
very<
happy<
;
Thegirl<
isalsovery<
placeholder"
//Whetheritisrightnow<
//Stillinthedistantfuture.<
Theboyhasbutonedream;
//Theboywantsthegirlcouldwellhavebeenhappy.<
br>
Iwanttosay:
Baby,Iloveyouforever;
/div>
loveHeart"
canvasid="
garden"
/canvas>
words"
<
messages"
亲爱的,这是我们相爱在一起的时光。
<
elapseClock"
loveu"
爱你直到永永远远。
br/>
divclass="
signature"
-爱你的人<
copyright"
ahref="
#"
....<
/a>
varoffsetX=$("
#loveHeart"
).width()/2;
varoffsetY=$("
).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"
position"
absolute"
bottom"
10px"
document.execCommand("
stop"
}else{
setTimeout(function(){
startHeartAnimation();
},5000);
timeElapse(together);
setInterval(function(){
timeElapse(together);
},500);
adjustCodePosition();
).typewriter();
/body>
/html>
Function.js
var$window=$(window),gardenCtx,gardenCanvas,$garden,garden;
varclientWidth=$(window).width();
varclientHeight=$(window).height();
$(function(){
//setupgarden
$loveHeart=$("
varoffsetX=$loveHeart.width()/2;
varoffsetY=$loveHeart.height()/2-55;
$garden=$("
#garden"
gardenCanvas=$garden[0];
gardenCanvas.width=$("
).width();
gardenCanvas.height=$("
).height()
gardenCtx=gardenCanvas.getContext("
2d"
gardenCtx.globalCompositeOperation="
lighter"
garden=newGarden(gardenCtx,gardenCanvas);
#content"
width"
$loveHeart.width()+$("
).width());
height"
Math.max($loveHeart.height(),$("
).height()));
margin-top"
Math.max(($window.height()-$("
).height())/2,10));
margin-left"
Math.max(($window.width()-$("
).width())/2,10));
//renderLoop
setInterval(function(){
garden.render();
},Garden.options.growSpeed);
});
$(window).resize(function(){
varnewWidth=$(window).width();
varnewHeight=$(window).height();
if(newWidth!
=clien
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5jQuery 制作 温馨 浪漫 爱心 表白 动画 特效