jquery版结婚电子请帖-电子请帖模板结婚请柬

老姐看了jquery版小型婚礼（可动态添加祝福语），觉得还不错，就让我给他们做一个电子请帖。已经做了大半年了，懒着一直没发……趁现在想起来了，就赶紧放上来让大家看看。

一、图片展示

1.开场动画

新人开着小轿车缓缓向我们驶来，从这头到那头，其中的滋味醉在心头。

2.首页

首页包括相册、邀请函、祝福墙和婚礼地址。

1).相册

相册集，由12张小图片组成一个心形，图片自循环逐张变大再变小。

2).邀请函

两情相悦只要证到手，又启在朝朝暮暮。

3).祝福墙

祝福墙动画：

留言板：

4).婚礼地址

#p#

二、代码展示

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(); 
})

祝有情人终成眷属，猿（媛）界同胞们早日投入火海。欢迎强力下载，疯狂拍砖。

　　查看下载