jquery结婚电子请柬特效素材js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery结婚电子请柬特效素材js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML >
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>jquery结婚电子请柬特效素材</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <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>
  </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="#" width="0" height="0" autostart="true" loop="true">
    <object data="#" 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>
</body>
</html>

JS代码(index.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();
}
)

CSS代码(index.css):

html{overflow:hidden;}
/*body{background:url("../images/bg.jpg") repeat-x;}
*/
.container{position:relative;width:900px;margin:auto;}
.car{position:absolute;width:460px;height:282px;top:0;left:0;z-index:1000;}
.u-car{position:absolute;z-index:999;}
.u-dog{position:absolute;left:-14px;top:-120px;}
/* 类似首页 */
.home{position:absolute;width:900px;height:500px;display:none;margin:20px auto;background:url("../images/home.jpg") no-repeat;z-index:100;}
.nav{position:absolute;bottom:30px;left:88px;}
.nav ul li{float:left;height:27px;padding-left:10px;line-height:25px;background:url("../images/wedding_btn.jpg") 0 0;border-radius:5px;margin:auto 3px;cursor:pointer;text-shadow:0 0 2px red;}
.nav ul li span{display:inline-block;height:27px;padding-right:10px;line-height:25px;background:url("../images/wedding_btn.jpg") 100% 0;border-radius:0 5px 5px 0;color:#f5ef91;font-weight:bold;}
.nav ul li:hover{box-shadow:0 0 8px #d92b84;}
/* 邀请函 */
.invitation{display:none;position:absolute;top:20px;width:1200px;height:500px;margin:auto;overflow:hidden;}
.invitation-content{position:absolute;left:100px;top:-540px;width:800px;height:500px;background:url("../images/invitation.jpg") no-repeat;transition:all 0.8s ease-in-out 0s;}
.invitation .u-return{display:none;left:0;}
/* 照片 */
.wedding-photos{display:none;}
/* 场景六 */
.six-box{display:none;position:relative;width:960px;height:800px;overflow:hidden;}
.six-box div{position:absolute;width:100px;height:100px;background:url("../images/six_center_img.png") no-repeat;}
/* 场景七 */
.seven-box{display:none;position:relative;margin:20px auto;width:958px;height:580px;border:1px solid #F4D938;}
/*.seven-box{display:none;position:relative;margin-top:40px;width:958px;height:800px;background:url("../images/seven_bg.jpg") no-repeat top center;border:1px solid #F4D938;overflow:hidden;}
*/
.clickMe{position:absolute;left:-145px;bottom:17px;width:229px;height:233px;cursor:pointer;text-indent:-99999px;background:url("../images/clickMe.png") no-repeat;z-index:9999;}
.seven-content{position:relative;width:790px;height:540px;margin:20px auto;background:#f865af;border-radius:50px;}
.seven-content div{position:absolute;width:57px;height:52px;padding:15px 5px 5px 10px;background:url("../images/note.png") no-repeat;overflow:hidden;cursor:pointer;z-index:99;}
.seven-content div.note-a1{background-position:0 0;}
.seven-content div.note-a2{background-position:-110px 0;}
.seven-content div.note-a3{background-position:-220px 0;}
.seven-content div.note-a4{background-position:-327px 0;}
.seven-content div.note-a5{background-position:0 -150px;}
.seven-content div.note-a6{background-position:-110px -150px;}
.seven-content div.note-a7{background-position:-220px -150px;}
.seven-content div.note-a8{background-position:-327px -150px;}
.seven-content div.note-a9{background-position:0 -296px;}
.seven-content div.note-a10{background-position:-110px -296px;}
.seven-content div.note-a11{background-position:-220px -296px;}
.seven-content div.note-a12{background-position:-327px -296px;}
.seven-content div.note-1{background-position:-1px -440px;color:#494000;}
.seven-content div.note-2{background-position:-110px -440px;color:#561e67;}
.seven-content div.note-3{background-position:-220px -440px;color:#07516f;}
.seven-content div.note-4{background-position:-329px -440px;color:#652f09;}
.seven-content div.note-5{background-position:0 -550px;color:#6b0f13;}
.seven-content div.note-6{background-position:-110px -550px;color:#034914;}
/* 遮罩层 */
.mask{position:fixed;top:0;left:0;width:100%;height:100%;background:white;opacity:0.4;filter:Alpha(opacity=40);z-index:9999;display:none;}
.pop-box{position:fixed;top:-300px;left:50%;margin-left:-250px;margin-top:-150px;width:500px;height:300px;padding:10px;background:#7C174B;border-radius:10px;z-index:99999;}
.pop-box h1{font-size:30px;text-align:center;color:white;margin:5px 0 10px;}
.pop-box textarea{display:block;width:440px;height:140px;padding:10px;margin:20px auto;resize:none;font-size:16px;border-radius:5px;background:white;color:#691323;_margin-left:270px;}
.pop-box .u-sure{margin:auto;width:100px;padding:8px 0;background:#B72E74;border-radius:3px;text-align:center;font-size:18px;color:white;font-weight:bold;cursor:pointer;}
/* 照片墙 */
.picture-wall{position:relative;width:750px;height:630px;margin:10px auto;display:none;}
.picture-wall div{position:absolute;border:1px solid #EEEEEE;padding:5px;box-shadow:0 0 8px #666666;border-radius:3px;cursor:pointer;font-size:0;}
.picture-wall .pic0{left:100px;top:0;}
.picture-wall .pic1{left:520px;top:0;}
.picture-wall .pic2{left:0;top:110px;}
.picture-wall .pic3{left:240px;top:110px;}
.picture-wall .pic4{left:420px;top:110px;}
.picture-wall .pic5{left:660px;top:110px;}
.picture-wall .pic6{left:100px;top:260px;}
.picture-wall .pic7{left:310px;top:260px;}
.picture-wall .pic8{left:520px;top:260px;}
.picture-wall .pic9{left:210px;top:370px;}
.picture-wall .pic10{left:450px;top:370px;}
.picture-wall .pic11{left:310px;top:520px;}
.picture-wall .picRow img{width:120px;height:80px;}
.picture-wall .picCol img{width:80px;height:120px;}
.bigCenter{z-index:99999;}
/* 返回首页 */
.u-return{left:-150px;position:absolute;top:0;width:100px;cursor:pointer;}
/* 婚礼地址 */
.address{display:none;position:absolute;top:20px;}
.u-love{position:absolute;bottom:77px;left:442px;width:50px;}

附件:下载该文件资源,减少时间成本(增值服务)