两天在网上不小心看到“js许愿墙”这几个字，我的神经就全部被调动了。然后就开始我的百度生涯，一直寻觅许愿墙背景图片和便利贴图片，觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片。最终我决定用jquery制作一个小型婚礼，并且实现添加祝福语的功能。

音乐响起来，开始我的婚礼进行曲~

一、婚礼演示图

场景一：

场景二：

场景三：

场景四：

　场景五：

场景六：

场景七：

添加祝福语：

二、html代码

<div class="box">
 <!-- 场景一 -->
 <div class="first-box">
 <div class="first-horn">
 <img src="images/first_horn.jpg"/>
 </div>
 <div class="first-txt">
 <div class="txt1"><img src="images/first_txt1.jpg"/></div>
 <div class="txt2"><img src="images/first_txt2.jpg"/></div>
 </div>
 </div>
 <!-- 场景二 -->
 <div class="second-box">
 <div class="second-people">
 <img src="images/second_people.jpg"/>
 </div>
 <div class="second-txt">
 <img src="images/second_txt.jpg"/>
 </div>
 </div>
 <!-- 场景三 -->
 <div class="three-box">
 <div class="three-img">
 <img src="images/three_img.jpg"/>
 </div>
 </div>
 <!-- 场景四 -->
 <div class="fore-box">
 <div class="fore-img">
 <img src="images/fore_img.jpg"/>
 </div>
 </div>
 <!-- 场景五 -->
 <div class="five-box">
 <div class="five-img">
 <img src="images/five_img.jpg"/>
 <div class="u-enter">进入婚礼</div>
 </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">
 <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>
 <!-- 遮罩层 -->
 <div class="mask"></div>
 <div class="pop-box">
 <h1>送上祝福语</h1>
 <textarea id="write">写上您的祝福吧~</textarea>
 <div class="u-sure" id="uSure">确定</div>
 </div>

三、js代码

场景一：

var $firstHorn=$(".first-horn"), /* 场景一左边喇叭 */
 $firstTxt=$(".first-txt"), /* 场景一文字div */
 firstTxtWidth=$firstTxt.width(), /* 文字div的宽度 */
 $secondBox=$(".second-box"), /* 场景二box */
 $secondPeople=$(".second-people"), /* 场景二左边人物 */
 $secondTxt=$(".second-txt"), /* 场景二右边文字 */
 $threeBox=$(".three-box"), /* 场景三box */
 $threeImg=$(".three-img"), /* 场景三图片 */
 $foreBox=$(".fore-box"), /* 场景四box */
 $foreImg=$(".fore-img"), /* 场景四图片 */
 $fiveBox=$(".five-box"), /* 场景五box */
 $fiveImg=$(".five-img"), /* 场景五中间图片 */
 $uEnter=$(".u-enter"), /* 进入婚礼按钮 */
 $sixBox=$(".six-box"), /* 场景六box */
 $sixDiv=$sixBox.find("div"), /* 场景六里面小块div */
 sixDivWidth=$sixDiv.width(), /* 场景六里面小块div的宽度 */
 sixDivHeight=$sixDiv.height(), /* 场景六里面小块div的高度 */
 sixBoxWidth=$sixBox.width(), /* 场景六宽度 */
 sixBoxHeight=$sixBox.height(),/* 场景六高度 */
 $sevenBox=$(".seven-box");
 /* 场景一 */
 $firstHorn.animate({left: 0},1000);
 $firstTxt.animate({left: "435px"},function(){
 $firstTxt.fadeIn(1000);
 showTxt($firstTxt.find("div:eq(0)")); /* 显示第一行文字 */
 setTimeout(function(){showTxt($firstTxt.find("div:eq(1)"));},3000); /* 显示第二行文字 */
 setTimeout(scene2,7000); /* 进入场景二 */
 });
 /* 显示文字 */
 function showTxt($obj){
 for(var i=0; i < 8; i++){
 (function(){
 $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根据i值，width逐渐变大 */
 })(i)
 }
 }

描述：场景一主要有两个功能，第一个是控制左边图片，第二个是让右边文字逐一显示。

场景二：

/* 场景二 */
 function scene2(){
 $firstTxt.fadeOut();
 $firstHorn.animate({left: "-422px"},function(){
 $secondBox.show();
 $secondPeople.animate({left: "0"});
 $secondTxt.animate({left: "230px"},function(){
 $secondTxt.fadeIn(1000);
 setTimeout(scene3,2000); /* 进入场景三 */
 });
 });
 }

描述：场景二功能简单一点，只控制左边人物出现，紧接着是文字显示。

添加祝福语：

/* 点我送祝福 */
 $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();
 var _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("请输入祝福语！");
 }
 })

描述：添加祝福语中，需填写祝福语，否则不让提交。可提交的祝福语便随机散布在祝福墙中，可实现随意拖动功能。

js所有代码：

/**
 * User: wei ya
 * Date: 14-6-12
 * Time: 下午8:08
 * 小型婚礼
 */
$(function(){
 var $firstHorn=$(".first-horn"), /* 场景一左边喇叭 */
 $firstTxt=$(".first-txt"), /* 场景一文字div */
 firstTxtWidth=$firstTxt.width(), /* 文字div的宽度 */
 $secondBox=$(".second-box"), /* 场景二box */
 $secondPeople=$(".second-people"), /* 场景二左边人物 */
 $secondTxt=$(".second-txt"), /* 场景二右边文字 */
 $threeBox=$(".three-box"), /* 场景三box */
 $threeImg=$(".three-img"), /* 场景三图片 */
 $foreBox=$(".fore-box"), /* 场景四box */
 $foreImg=$(".fore-img"), /* 场景四图片 */
 $fiveBox=$(".five-box"), /* 场景五box */
 $fiveImg=$(".five-img"), /* 场景五中间图片 */
 $uEnter=$(".u-enter"), /* 进入婚礼按钮 */
 $sixBox=$(".six-box"), /* 场景六box */
 $sixDiv=$sixBox.find("div"), /* 场景六里面小块div */
 sixDivWidth=$sixDiv.width(), /* 场景六里面小块div的宽度 */
 sixDivHeight=$sixDiv.height(), /* 场景六里面小块div的高度 */
 sixBoxWidth=$sixBox.width(), /* 场景六宽度 */
 sixBoxHeight=$sixBox.height(),/* 场景六高度 */
 $sevenBox=$(".seven-box");
 /* 场景一 */
 $firstHorn.animate({left: 0},1000);
 $firstTxt.animate({left: "435px"},function(){
 $firstTxt.fadeIn(1000);
 showTxt($firstTxt.find("div:eq(0)")); /* 显示第一行文字 */
 setTimeout(function(){showTxt($firstTxt.find("div:eq(1)"));},3000); /* 显示第二行文字 */
 setTimeout(scene2,7000); /* 进入场景二 */
 });
 /* 显示文字 */
 function showTxt($obj){
 for(var i=0; i < 8; i++){
 (function(){
 $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根据i值，width逐渐变大 */
 })(i)
 }
 }
 /* 场景二 */
 function scene2(){
 $firstTxt.fadeOut();
 $firstHorn.animate({left: "-422px"},function(){
 $secondBox.show();
 $secondPeople.animate({left: "0"});
 $secondTxt.animate({left: "230px"},function(){
 $secondTxt.fadeIn(1000);
 setTimeout(scene3,2000); /* 进入场景三 */
 });
 });
 }
 /* 场景三 */
 function scene3(){
 $secondBox.hide();
 $threeBox.fadeIn();
 for(var i=0; i < 6; i++){ /* 控制图片跳转频率 */
 if(i==0){
 $threeImg.css({left:0,top:0});
 }else if(i%2==0){
 $threeImg.animate({left: 40*i+"px",top: 30*i+"px"},80*(6-i));
 }else{
 $threeImg.animate({left: 40*i+"px",top: "200px"},80*(6-i));
 }
 }
 setTimeout(scene4,2500); /* 进入场景四 */
 }
 /* 场景四 */
 function scene4(){
 $threeBox.hide();
 $foreBox.fadeIn();
 $foreImg.animate({top: "80px"},1000);
 setTimeout(scene5,2500); /* 进入场景五 */
 }
 /* 场景五 */
 function scene5(){
 $foreImg.animate({left: "960px"},function(){
 $fiveBox.fadeIn();
 $fiveBox.find("img").css({"transform": "scale(1)"});
 $uEnter.click(function(){
 $fiveBox.hide();
 setTimeout(scene6,400); /* 进入第六场景 */
 })
 });
 }
 /* 场景六 */
 var colCount=4, /* 多少列 */
 rowCount=4; /* 多少行 */
 function scene6(){
 $sixBox.fadeIn();
 /* 聚合 */
 $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).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"}); /* 先设置成为聚合，定位好背景图片 */
 setTimeout(scatter,1600); /* 调用散开 */
 })
 setTimeout(scene7,3000); /* 进入第七场景 */
 }
 /* 散开 */
 function scatter(){
 $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; /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
 $(this).animate({"left": cssLeft,"top": cssTop},1200);
 })
 }
 /* 场景七 */
 var $sevenDiv=$(".seven-content div"),
 $clickMe=$(".clickMe"),
 /* 送上祝福 */
 $mask=$(".mask"),
 $popBox=$(".pop-box"),
 $write=$("#write"),
 $uSure=$("#uSure"),
 $sevenContent=$(".seven-content");
 function scene7(){
 $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
 }
 }
 /* 拖动祝福卡片 */
 draggableNote();
 /* 拖动图片 */
 function draggableNote(){
 $(".seven-content div").draggable({
 containment: $sevenContent,
 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"}); /* 停止拖动，旋转为随机的 */
 }
 })
 }
 /* 点我送祝福 */
 $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();
 var _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("请输入祝福语！");
 }
 })
 }
})

总结：做完这个小型婚礼，我自己都喜欢自己了，嘿嘿，小小自恋下，希望这个动画也能给大家一个小惊喜。如果大家觉得不错，希望大家能动动小手给我一个小小的赞，促使我不断努力不断去发现，谢谢~ O(∩_∩)O~~

下载：download.csdn.net/download/ya307115947/7497205

链接：cnblogs.com/tattoo/p/3788019.html

回复“资源”，领取 练手源码，视频教程，微服务、并发，数据可调优等，搜索【Java知音】

着信息时代的发展，可能因为距离或者其他原因，不能亲自给亲朋好友送上手写请柬，电子请柬就成了新人们的首选。

6月初安以轩大婚，宣布结婚最吸引人眼球的就是他们的创意电子喜帖了！

这个喜帖设计非常浪漫，用了安以轩最喜欢的卡通人物“哆啦A梦”。

最创意的设计莫过于要亲亲手机屏幕才能打开喜帖的互动设计。

很可爱吧！！结婚喜帖做成这样很暖心，大大加深了大家对婚礼信息的印象，而且制作起来并不麻烦喔！~

小编亲测了现在网络上的电子请柬制作网站与app，简单易上手，甚至不用学习，制作也花费不了几分钟，高效快捷！一起来看看吧~

1

简客

简客界面干净清新，进入页面之后可以直接点击“婚礼”进入编辑界面，再根据提醒自定义自己的电子请柬。

如果为了方便也可以直接选用模板库里的模板进行编辑，操作简单，全免费。

app：简客

2

秀米

秀米有两大功能：H5和长图文排版。

模板不是特别多，但是素材挺多的，制作稍微有一点点复杂，如果自己有创意，也有时间，可以慢慢做，会做出非常好看又独一无二的婚礼请柬，全免费。

长图文排版比电子请柬的制作相对简单，素材也可以用秀米自带的。相当于给各位宾客写了一封邀请函。

网址：https://xiumi.us/#/

3

喜帖纪

这是一个专门制作请柬、邀请帖、喜帖类的网站。

风格较多：有森系、日系、欧美、中国风，还有摄影工作室或者影楼比较常用的杂志风。

画风美丽，但是大部分都收费，基本在30+

收费的电子请柬除了画风比较细腻以外，更是增加了婚礼流程与反馈。

给新人的祝福提交以后也能在电子请柬的下面显示，所以钱花的还是值得的。

网址：http://www.xitieji.cn/scene

4

喜帖居

喜帖居的婚礼请柬比较多，原创的也多，与其他网站的模板重合较少，质量上乘。

收费大多在40+元左右，性价比一般。

需要的可以自己去网站上慢慢挑挑看。

网址：http://www.xitieju.com/scene

5

柬讯

这是一款专门制作婚礼所用电子请柬的app，目前小编没有找到他们的官方网址，所以专门下了一个app来看看。

操作超级简单，只需要选择好模板，导入婚纱照，相应输入时间地点，选择一段自己喜欢的音乐，即可生成。

一般模板需要9.9元，制作不超过三分钟。省时省事还省心。

选择发请柬 → 购买模板 → 添加照片 → 填入相应信息 → 选择音乐 → 完成。

app：柬讯

6

微艺秀

微艺秀的制作方法与其他平台相比，性价比并没有那么高，价格偏贵。但是也不乏有特别精美好看的。

如果对电子请柬要求较高或者想要特别一点的，可以考虑。

不过小编发现他们家的模板好像与别的网站有部分重合，价格也有误差，可酌情选择。

网址：http://www.ve13.com/scene

7

邀约

这个网站很多专业的婚纱影楼都在用，模板虽然不多，但是精致程度堪比喜帖纪这种收费的网站。

小清新和中式风格的模板都很好看。而且也有婚礼流程制作页面，重要的是全免费~~

这个网站还有一系列宝宝百日宴或者生日宴的邀请卡制作模板，画风很可爱。

这个制作网站素材的替换素材比较少，制作的话可只改照片与文字比较简单一类。

因为用的人比较多，所以如果婚礼旺季可能会与其他人“撞”电子请柬。

网址：http://www.yaoyue365.com

8

初页

初页是一种”类PPT”的移动端设备(如手机、pad)展示与传播的H5页面，通俗点讲就是翻翻看。

下载了初页的app以后可直接搜索关键字“婚礼”，模板虽然不多，但是原创性很强，因为相对来讲也比较好听。

收费模板不多，自己制作的不需要钱。

APP：初页

9

易企秀

易企秀相对来讲是比较专业的H5制作软件，可操作空间大，若是有点小基础完全可以自己制作。

分门别类多，素材替换也多。就算是毫无经验也可以慢慢摸索着做。

相比于其他的模板网站，易企秀的风格化做的更好，只要自己有更多想法就能做出更不同的东西。

部分模板收费，价格在可以接受的程度。

界面制作功能完善，也有单独编辑好的页面可以插入，不论是婚礼流程还是其他信息，都可以在自己的想法下完成编辑。

其他公用模板也可以进行再编辑。

网址：http://store.eqxiu.com/scenelist-2.html

10

maka

maka是许多新人互相推荐的，模板比较小清新，可以根据色系来选择模板，新人们可以根据自己婚纱照的色系直接选择，很节省时间。

价格在10~60元以内。新人们可对比起来挑选，操作也很简单，五分钟内可以制作出一份很好看的婚礼请柬。

网址：http://maka.im/store

电子请柬一般具有以下几个因素

封面—婚纱照展示—婚宴时间、地点—地图—回馈联系人—音乐

网站和模板的不同也会相应的调整顺序，但是这几点必不可少。

在素材的选择上尽量做到色调统一，就会好看。

素材可以在相应的网站找矢量图，不用抠图，直接保存下来，导入请柬就好。

文案方面可以以爱情故事为叙述，让你们之间的点点滴滴丰富这份请柬。

素材风暴：http://www.sucaifengbao.com/

千库网：http://588ku.com/sucai/

千图网：http://www.58pic.com/tupian/hunli.html

电子请柬要好看，除了模板之外，更多的是制作人的心意。

新人们可以一起动手为自己的婚礼做一个电子请柬，一个人负责找素材，一个人负责找模板。

就算花了不止三分钟，但是这份美好的回忆一定会记很久的。

若是很赶急的新人，也可以直接上某宝购买一个，价格比网站上的相对便宜，不过质量良莠不齐，选择的时候一定要多对比一下。

（致力于保护作者版权，部分作品来自网络，无法核实出处，如有侵权请联系删除。谢谢！）