[转载]jquery版结婚电子请帖
原文链接：http://www.cnblogs.com/tattoo/p/4500329.html
老姐看了jquery版小型婚礼（可动态添加祝福语），觉得还不错，就让我给他们做一个电子请帖。已经做了大半年了，懒着一直没发……趁现在想起来了，就赶紧放上来让大家看看。
一、图片展示
1.开场动画
新人开着小轿车缓缓向我们驶来，从这头到那头，其中的滋味醉在心头。
2.首页
首页包括相册、邀请函、祝福墙和婚礼地址。
1).相册
相册集，由12张小图片组成一个心形，图片自循环逐张变大再变小。
2).邀请函
两情相悦只要证到手，又岂在朝朝暮暮。
3).祝福墙
祝福墙动画：
留言板：
4).婚礼地址
二、代码展示
1.html代码
<!DOCTYPE HTML >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--[if ie 6]>
<style type="text/css">
.mask {position: absolute; height: 800px;}
.pop-box {_position: absolute;}
</style>
<![endif]-->
<div class="container" >
<!-- 移动的婚车 -->
<div class="car">
<img class="u-car" src="images/moveCar.png"/>
<img class="u-dog" src="images/ballon.gif"/>
</div>
<!-- 首页 -->
<div class="home">
<div class="nav">
<ul>
<li><span id="to-picture">相册</span></li>
<li><span id="to-invitation">邀请函</span></li>
<li><span id="to-wall">祝福墙</span></li>
<li><span id="to-address">婚礼地点</span></li>
</ul>
</div>
</div>
<!-- 邀请函 -->
<div class="invitation">
<!--<span id="invite-return" class="u-return">返回首页</span>-->
<img class="u-return" id="invite-return" src="images/btn_return.png"/>
<div class="invitation-content"></div>
</div>
<!-- 婚纱照 -->
<div class="wedding-photos">
<div><img src="images/photo1.jpg"/></div>
<div><img src="images/photo2.jpg"/></div>
<div><img src="images/photo3.jpg"/></div>
<div><img src="images/photo4.jpg"/></div>
<div><img src="images/photo5.jpg"/></div>
</div>
<!-- 场景六 -->
<div class="six-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 场景七祝福墙内容 -->
<div class="seven-box">
<img id="blessing-return" class="u-return" src="images/btn_return.png"/>
<div class="clickMe">点我送祝福</div>
<div class="seven-content">
<div class="note-a1"></div>
<div class="note-a2"></div>
<div class="note-a3"></div>
<div class="note-a4"></div>
<div class="note-a5"></div>
<div class="note-a6"></div>
<div class="note-a7"></div>
<div class="note-a8"></div>
<div class="note-a9"></div>
<div class="note-a10"></div>
<div class="note-a11"></div>
<div class="note-a12"></div>
<div class="note-1">一定要幸福哦~</div>
<div class="note-2">祝你们白头偕老！</div>
<div class="note-3">早生贵子~</div>
<div class="note-4">新婚快乐~</div>
<div class="note-5">生个宝宝认我做干妈！</div>
<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>
<div class="note-1">一定要幸福哦~</div>
<div class="note-2">祝你们白头偕老！</div>
<div class="note-3">早生贵子~</div>
<div class="note-4">新婚快乐~</div>
<div class="note-5">生个宝宝认我做干妈！</div>
<div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>
</div>
</div>
<!-- 照片墙 -->
<div class="picture-wall">
<img class="u-return" id="picture-return" src="images/btn_return.png"/>
<div class="pic0 picRow"><img src="images/pic0.jpg"/></div>
<div class="pic1 picRow"><img src="images/pic1.jpg"/></div>
<div class="pic2 picCol"><img src="images/pic2.jpg"/></div>
<div class="pic3 picCol"><img src="images/pic3.jpg"/></div>
<div class="pic4 picCol"><img src="images/pic4.jpg"/></div>
<div class="pic5 picCol"><img src="images/pic5.jpg"/></div>
<div class="pic6 picRow"><img src="images/pic6.jpg"/></div>
<div class="pic7 picRow"><img src="images/pic7.jpg"/></div>
<div class="pic8 picRow"><img src="images/pic8.jpg"/></div>
<div class="pic9 picCol"><img src="images/pic9.jpg"/></div>
<div class="pic10 picCol"><img src="images/pic10.jpg"/></div>
<div class="pic11 picRow"><img src="images/pic11.jpg"/></div>
</div>
<!-- 婚礼地址 -->
<div class="address">
<img class="u-return" id="address-return" src="images/btn_return.png"/>
<img class="u-love" src="images/love.gif"/>
<img src="images/address.jpg"/>
</div>
</div>
<!-- 遮罩层 -->
<div class="mask"></div>
<div class="pop-box">
<h1>送上祝福语</h1>
<textarea id="write">写上您的祝福吧~</textarea>
<div class="u-sure" id="uSure">确定</div>
</div>
<!-- 背景音乐 -->
<embed src="http://www.youxiren.com/upload/image/20140102/ezjzw.mp3" width="0" height="0" autostart="true" loop="true">
<object data="http://www.youxiren.com/upload/image/20140102/ezjzw.mp3" type="application/x-mplayer2" width="0" height="0">
<param name="src" value="music.mp3">
<param name="autostart" value="1">
<param name="playcount" value="0">
</object>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
2.js代码
var sceneObject = {
init: function(){
this._enterCar();
this._enterInvitation();
this._enterAlbum();
this._enterWall();
this._addBlessing();
this._searchAddress();
},
/*---------------------------------移动的婚车------------------------------*/
_enterCar: function(){
initCar();
/* 婚车随着窗口大小改变 */
$(window).resize(function(){
setCarPosition();
})
},
/*---------------------------------进入邀请函------------------------------*/
_enterInvitation: function(){
var $home = $(".home"), /* 首页 */
$toInvitation = $("#to-invitation"), /* 邀请函按钮 */
$invitation = $(".invitation"), /* 邀请函模块 */
$invitationCt = $(".invitation-content"), /* 邀请函内容 */
$inviteReturn = $("#invite-return");
$toInvitation.click(function(){
$home.fadeOut(); /* 隐藏首页 */
$invitation.fadeIn();
$invitationCt.animate({"top": "0"},function(){
$inviteReturn.fadeIn();
});
})
/* 邀请函中点击返回按钮 */
$inviteReturn.click(function(){
$invitationCt.css({"top": "-540px"});
$invitation.fadeOut(function(){
$inviteReturn.fadeOut();
$home.fadeIn(600);
});
})
},
/*---------------------------------进入相册------------------------------*/
_enterAlbum: function(){
var $home = $(".home"), /* 首页 */
$toPicture = $("#to-picture"),
$pictureWall = $(".picture-wall"),
timer;
$toPicture.click(function(){
$home.fadeOut(function(){/* 隐藏首页 */
$pictureWall.fadeIn(); /* 显示相册 */
autoPicWall();
timer = setInterval(autoPicWall,4000); /* 照片自动播放 */
});
})
/* 点击照片墙中返回按钮 */
$("#picture-return").click(function(){
clearInterval(timer); /* 返回首页时清除循环 */
picPage = 0; /* 并且显示图片为0，也就是下一次进入时又从0开始 */
$pictureWall.fadeOut(function(){
$home.fadeIn();
})
})
},
/*---------------------------------进入祝福墙-------------------------------*/
_enterWall: function(){
var $home = $(".home"),
$uEnter = $("#to-wall"); /* 进入祝福墙按钮 */
$uEnter.click(function(){
$home.hide();
setTimeout(scene6,400); /* 进入祝福墙场景动画 */
})
},
/*---------------------------------添加祝福语-------------------------------*/
_addBlessing: function(){
var $home = $(".home"),
$sevenDiv = $(".seven-content div"),
$clickMe = $(".clickMe"),
$mask = $(".mask"),
$popBox = $(".pop-box"),
$write = $("#write"),
$uSure = $("#uSure"),
$sevenContent = $(".seven-content");
/* 拖动祝福卡片 */
draggableNote();
/* 点我送祝福 */
$clickMe.click(function(){
$write.val("送上您的祝福吧~");
$mask.fadeIn();
$popBox.animate({top: "50%"});
})
/* 获取焦点时 */
$write.focus(function(){
var _val = $(this).val();
if(_val == "送上您的祝福吧~"){
$(this).val("");
}
})
/* 丢失焦点时 */
$write.blur(function(){
var _val = $(this).val();
if(_val.length == 0){
$(this).val("送上您的祝福吧~");
}
})
/* 确定添加祝福语 */
$uSure.click(function(){
var _writeVal = $write.val(),
_randomNum = Math.ceil(Math.random()*6);
if(_writeVal != "送上您的祝福吧~"){
var _div = '<div class="note-'+_randomNum+'">'+_writeVal+'</div>';
$sevenContent.append(_div); /* 如果输入祝福语，将此标签添加的尾部 */
defineSevenDiv($sevenContent.find("div:last"));
$popBox.animate({top: "-300px"},function(){
$mask.fadeOut();
draggableNote(); /* 可拖动卡片，给新添加的标签赋予拖动功能 */
});
}else{
alert("请输入祝福语！");
}
})
/* 祝福墙中返回首页 */
$("#blessing-return").click(function(){
$(".seven-box").fadeOut(function(){
$home.fadeIn();
})
})
},
/*---------------------------------查看婚礼地址-------------------------------*/
_searchAddress: function(){
var $home = $(".home"),
$toAddress = $("#to-address"); /* 婚礼地址导航 */
$address = $(".address"), /* 婚礼地址图 */
$addressReturn = $("#address-return");
$toAddress.click(function(){
$home.fadeOut();
$address.fadeIn();
})
/* 婚礼地址返回首页 */
$addressReturn.click(function(){
$address.fadeOut();
$home.fadeIn();
})
}
}
/*---------------------------------移动的小车-------------------------------*/
function initCar(){
var $home = $(".home"); /* 首页 */
setCarPosition();
setTimeout(function(){
$home.fadeIn();
},6500);
}
/* 婚车位置定位和滑动方法 */
function setCarPosition(){
var $car = $(".car"),
wWidth = $(window).width(), /* 文档宽度 */
wHeight = $(window).height(), /* 窗口高度 */
carWidth = $car.height(), /* 婚车宽度 */
carHeight = $car.height(); /* 婚车高度 */
$car.css({top:wHeight - carHeight - 100});
$car.animate({left: wWidth - carWidth + 100},8000).fadeOut();
}
/*---------------------------------图片墙-------------------------------*/
var picPage = 0, /* 当前是第几张图片放大和缩小 */
picLeft, /* 图片左边距离 */
picTop; /* 图片上部定位距离 */
/* 自动放大缩小图片方法 */
function autoPicWall(){
var $pictureWallPic = $(".picture-wall div"),
$own = $pictureWallPic.eq(picPage),
isBig = $own.hasClass("bigCenter"), /* 放大时有这个class */
hasClassPicRow = $own.hasClass("picRow"); /* 判断图片是行的（就是宽大于高） */
/* 调用图片放大 */
becomeBig($own,hasClassPicRow);
/* 隔2秒图片自动缩小 */
setTimeout(function(){becomeSmall($own,hasClassPicRow);},2000);
/* 保证当前放大图片为图片总个数内，也就是说存在这个图片 */
if(picPage < $pictureWallPic.length - 1){
picPage++;
}else if(picPage == $pictureWallPic.length - 1){ /* 如果当前图片为最后一张图片，则又从第一张图片开始显示 */
picPage = 0;
}
}
/* 图片变大方法 */
function becomeBig($own,hasClassPicRow){
var $mask = $(".mask"),
pictureWallWidth = $(".picture-wall").width(),
pictureWallHeight = $(".picture-wall").height();
picLeft = $own.css("left"); /* 原始绝对定位left值 */
picTop = $own.css("top"); /* 原始绝对定位top值 */
$own.toggleClass("bigCenter"); /* 添加放大的class属性 */
$mask.fadeIn();
/* 图片为行图片，也就是宽度大于高度 */
if(hasClassPicRow){
for(var i = 120; i < 720; i+=20){
$own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
$own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
}
}else{
for(var i = 80; i < 480; i+=20){
$own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
$own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
}
}
}
/* 图片缩小方法 */
function becomeSmall($own,hasClassPicRow){
var $mask = $(".mask"),
pictureWallWidth = $(".picture-wall").width(),
pictureWallHeight = $(".picture-wall").height();
if(hasClassPicRow){
for(var i = 720; i >= 120; i-=40){
$own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2);
/* 图片缩小到中心位置 */
$own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2);
}
}else{
for(var i = 480; i >= 80; i-=40){
$own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2);
/* 图片缩小到中心位置 */
$own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2);
}
}
/* 图片缩小到中心位置后，回到原始位置 */
$own.animate({"left": picLeft, "top": picTop},400,function(){
$mask.fadeOut(); /* 隐藏遮罩层 */
$own.toggleClass("bigCenter"); /* 去除放大的class属性 */
});
}
/*---------------------------------祝福墙进入动画-------------------------------*/
var colCount = 4, /* 多少列 */
rowCount = 4, /* 多少行 */
$sixBox;
function scene6(){
$sixBox = $(".six-box"); /* 场景六box */
$sixBox.fadeIn();
/* 散开 */
scatter();
setTimeout(together,100); /* 调用聚合 */
setTimeout(scene7,2000); /* 进入第七场景 */
}
/* 所有图片聚合 */
function together(){
var $sixDiv = $sixBox.find("div"), /* 场景六里面小块div */
sixDivWidth = $sixDiv.width(), /* 场景六里面小块div的宽度 */
sixDivHeight = $sixDiv.height(), /* 场景六里面小块div的高度 */
sixBoxWidth = $sixBox.width(), /* 场景六宽度 */
sixBoxHeight = $sixBox.height();/* 场景六高度 */
$sixDiv.each(function(){
var _index = $(this).index(),
col = _index%colCount, /* 第几列 */
row = Math.floor(_index/rowCount), /* 第几行 */
cssLeft = sixBoxWidth/2 - colCount/2*sixDivWidth + col*sixDivWidth, /* left的值 */
cssTop = sixBoxHeight/2 - rowCount/2*sixDivHeight + row*sixDivHeight, /* top的值 */
divLeft = -col*sixDivWidth, /* 背景定位的宽度 */
divTop = -row*sixDivHeight; /* 背景定位的高度 */
$(this).animate({"left": cssLeft,"top": cssTop-100},800);
})
}
/* 所有图片散开 */
function scatter(){
var $sixDiv = $sixBox.find("div"), /* 场景六里面小块div */
sixDivWidth = $sixDiv.width(), /* 场景六里面小块div的宽度 */
sixDivHeight = $sixDiv.height(), /* 场景六里面小块div的高度 */
sixBoxWidth = $sixBox.width(), /* 场景六宽度 */
sixBoxHeight = $sixBox.height();/* 场景六高度 */
$sixDiv.each(function(){
var _index = $(this).index(),
col = _index%colCount, /* 第几列 */
row = Math.floor(_index/rowCount), /* 第几行 */
cssLeft = (col-1)*(sixBoxWidth+sixDivWidth)- sixDivWidth, /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
cssTop = (row-1)*(sixBoxHeight+sixDivHeight)- sixDivWidth, /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
divLeft = -col*sixDivWidth, /* 背景定位的宽度 */
divTop = -row*sixDivHeight; /* 背景定位的高度 */
$(this).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"})
})
}
/*---------------------------------祝福墙内容页------------------------------*/
function scene7(){
var $sevenDiv = $(".seven-content div"),
$sevenBox = $(".seven-box");
$sixBox.hide();
$sevenBox.fadeIn(1000);
$sevenDiv.each(function(){
defineSevenDiv($(this));
})
}
/* 定义祝福语贴纸位置和旋转角度 */
function defineSevenDiv($own){
var _obj = defineRandom();
$own.css({"transform":"rotate("+_obj.rotate+"deg)"}); /* 设置随机旋转值 */
$own.animate({left: _obj.left+"px",top: _obj.top+"px"}); /* 随机排布 */
}
/* 定义随机left，top和旋转值 */
function defineRandom(){
var randomLeft = Math.floor(680*(Math.random())) + 30, /* 图片left值 */
randomTop = Math.floor(400*Math.random()) + 30, /* 图片top值 */
randomRotate = 20 - Math.floor(40*Math.random()); /* 图片旋转角度 */
return {
left: randomLeft,
top: randomTop,
rotate:randomRotate
}
}
/* 拖动图片 */
function draggableNote(){
$(".seven-content div").draggable({
containment: $(".seven-content"),
zIndex: 2700,
start: function(){
$(this).css({"transform":"rotate(0deg)","cursor": "crosshair"}); /* 开始拖动图片旋转为0，鼠标样式改变 */
},
stop: function(){
var _obj = defineRandom();
$(this).css({"transform":"rotate("+_obj.rotate+"deg)","cursor": "pointer"}); /* 停止拖动，旋转为随机的 */
}
})
}
$(function(){
sceneObject.init();
})
祝有情人终成眷属，猿（媛）界同胞们早日投入火海。欢迎强力下载，疯狂拍砖。
如果csdn下载失败的，点这里下载： http://pan.baidu.com/disk/home#path=%252Fjquery%25E5%258A%25A8%25E7%2594%25BB
