<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5圣诞节</title>
<meta id="viewport" name="viewport" content="width=640, initial-scale=0.5, maximum-scale=2.0, minimum-scale=0.5, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="MobileOptimized" content="640">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="images/main.css" type="text/css">
<script type="text/javascript" src="images/viewport.js"></script>
<script type="text/javascript" src="images/jquery-1.9.1-min.js"></script>
<script src="images/jquery.min.js"></script>
<script src="images/warterfall.js"></script>
<script>var gSound = 'images/christmas.mp3';</script>
<script>
var deerSprite;
var newyearCar1Sprite;
var newyearCar2Sprite;
var newyearCar3Sprite;
var title1Sprite;
var title2Sprite;
var title3Sprite;
var openGiftSprite;
var flowerSprite;
function animation1()
{
$('.pop1').fadeIn(1000);
setTimeout(function(){$('.pop1').fadeOut(1000);$('.pop2').fadeIn(1000);},3000);
var duration1 = 15000;
var duration2 = 15000;
deerSprite = new createDeerSprite();
newyearCar1Sprite = new createCarSprite(1,{isVibrate:true});
$('.bg').animate({'left':'0px'},duration1,function(){});
$('.deer_group').animate({'left':'-640px'},duration2,function(){clearInterval(newyearCar1Sprite.timeID1);clearInterval(deerSprite.timeID1);newyearCar1Sprite.carRotate=0;newyearCar1Sprite.el.css('-webkit-transform','rotate('+newyearCar1Sprite.carRotate+'deg)');openGiftSprite = new createOpenGiftSprite();});
title1Sprite = new createTitleSprite(1,{isVibrate:true});
new createStarSprite(1,{'top':'10px','left':'0px','scale':0.2,'rotate':'0deg'});
new createStarSprite(2,{'top':'20px','left':'60px','scale':0.25,'rotate':'10deg'});
new createStarSprite(3,{'top':'320px','left':'120px','scale':0.2,'rotate':'20deg'});
new createStarSprite(4,{'top':'250px','left':'260px','scale':0.25,'rotate':'30deg'});
new createStarSprite(5,{'top':'20px','left':'480px','scale':0.3,'rotate':'40deg'});
new createStarSprite(6,{'top':'320px','left':'410px','scale':0.25,'rotate':'50deg'});
new createStarSprite(7,{'top':'390px','left':'500px','scale':0.4,'rotate':'60deg'});
new createStarSprite(8,{'top':'80px','left':'520px','scale':0.35,'rotate':'70deg'});
new createStarSprite(9,{'top':'420px','left':'30px','scale':0.4,'rotate':'80deg'});
}
function animation2()
{
flowerSprite = new createFlowersSprite(10);
title2Sprite = new createTitleSprite(2,{isVibrate:false});
var titleStep = 0;
$('#title2').animate({'opacity':1,'top':'30px'},{'step':function(now,fx){if(fx.prop=='opacity'){titleStep++;}if(titleStep%2==0 && fx.prop=='opacity'){$(this).css('-webkit-transform','scale('+now+')');}},'duration':3000});
setTimeout(function(){animation3();},3000);
}
function animation3()
{
clearInterval(flowerSprite.timeID1);
clearInterval(title2Sprite.timeID1);
setTimeout(function(){$('.animation2').fadeOut();$('.animation3').fadeIn();},1500);
title3Sprite = new createTitleSprite(3,{isVibrate:true});
$('.goto_flower').click(function(){
//location.href='http://sun-air.net/wechat/event_20131230_2.html';
});
$('.share_help_entry').click(function(){
$('.card_help').fadeIn(500);
});
$('.card_help').click(function(){
$('.card_help').fadeOut(500);
});
}
function createDeerSprite()
{
this.duration1 = 100;
this.el = $('.deer');
this.timeID1 = setInterval(function(){deerSprite.el.toggleClass('deer_frame2');},this.duration1);
}
function createCarSprite(id,option)
{
this.duration1 = 100;
this.el = $('#newyearcar'+id);
if(option.isVibrate)
{
this.carRotate = 0;
this.perCarRotate = 0.1;
this.carMinRotate = -1;
this.carMaxRotate = 1;
var carSprite = this;
this.timeID1 = setInterval(function()
{
if(carSprite.carMinRotate<carSprite.carRotate && carSprite.carRotate<carSprite.carMaxRotate)
{
carSprite.carRotate = carSprite.carRotate+carSprite.perCarRotate;
}else if(carSprite.carRotate>=carSprite.carMaxRotate)
{
carSprite.perCarRotate = -0.1;
carSprite.carRotate = carSprite.carRotate+carSprite.perCarRotate;
}else if(carSprite.carRotate<=carSprite.carMinRotate)
{
carSprite.perCarRotate = 0.1;
carSprite.carRotate = carSprite.carRotate+carSprite.perCarRotate;
}
carSprite.el.css('-webkit-transform','rotate('+carSprite.carRotate+'deg)');
},this.duration1);
}
}
function createTitleSprite(id,option)
{
this.duration1 = 100;
this.el = $('#title'+id);
this.rotate = 0;
this.perRotate = 0.1;
this.minRotate = -1;
this.maxRotate = 1;
titleSprite = this;
if(option.isVibrate)
{
this.timeID1 = setInterval(function()
{
if(titleSprite.minRotate<titleSprite.rotate && titleSprite.rotate<titleSprite.maxRotate)
{
titleSprite.rotate = titleSprite.rotate+titleSprite.perRotate;
}else if(titleSprite.rotate>=titleSprite.maxRotate)
{
titleSprite.perRotate = -0.1;
titleSprite.rotate = titleSprite.rotate+titleSprite.perRotate;
}else if(titleSprite.rotate<=titleSprite.minRotate)
{
titleSprite.perRotate = 0.1;
titleSprite.rotate = titleSprite.rotate+titleSprite.perRotate;
}
titleSprite.el.css('-webkit-transform','rotate('+titleSprite.rotate+'deg)');
},this.duration1);
}
}
function createOpenGiftSprite()
{
this.el = $('.opengift');
this.el.show();
this.minWidth = 134;
this.maxWidth = 168;
this.currentWidth = this.minWidth;
this.changePosition = 0;
this.perChangePosition = 2;
var openGiftSprite = this;
this.timeID1 = setInterval(function()
{
if(openGiftSprite.currentWidth>openGiftSprite.maxWidth || openGiftSprite.currentWidth<openGiftSprite.minWidth)
{
openGiftSprite.perChangePosition = -openGiftSprite.perChangePosition;
}
openGiftSprite.currentWidth = openGiftSprite.currentWidth+openGiftSprite.perChangePosition;
openGiftSprite.changePosition = openGiftSprite.changePosition+openGiftSprite.perChangePosition;
openGiftSprite.el.css('top',parseInt(openGiftSprite.el.css('top'),10)-openGiftSprite.perChangePosition/2+'px');
openGiftSprite.el.css('left',parseInt(openGiftSprite.el.css('left'),10)-openGiftSprite.perChangePosition/2+'px');
openGiftSprite.el.css('width',openGiftSprite.currentWidth+'px');
openGiftSprite.el.css('height',openGiftSprite.currentWidth+'px');
},100);
}
function createStarSprite(id,option)
{
this.el = $('#star'+id);
this.minWidth = 115;
this.maxWidth = 115;
this.initScale = option.scale ? option.scale : 1;
this.minScale = option.minScale ? option.minScale : option.scale/1.2;
this.maxScale = option.maxScale ? option.maxScale : option.scale*1.2;
this.initRotate = option.rotate ? option.rotate : '0deg';
this.perChangeScale = (this.initScale-this.minScale)/5;
this.el.css('-webkit-transform','scale('+this.initScale+') rotate('+this.initRotate+')');
this.currentScale = this.initScale;
this.el.css('top',option.top);
this.el.css('left',option.left);
var starSprite = this;
this.timeID1 = setInterval(function(){
if(starSprite.currentScale>starSprite.maxScale || starSprite.currentScale<starSprite.minScale)
{
starSprite.perChangeScale = -starSprite.perChangeScale;
}
starSprite.currentScale = s
- 1
- 2
前往页