[转载]jquery版小型婚礼（可动态添加祝福语）-白红宇

原文链接：

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

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

　　一、婚礼演示图

　　场景一：

　　场景二：

　　场景三：

　　场景四：

　　场景五：

　　场景六：

　　场景七：

　　添加祝福语：

　　二、html代码


                 
       
       
        
         
       
 
        
        
         
        
 
        
         
        
 
       
 
      
 
       
       
        
         
       
 
        
         
       
 
      
 
       
       
        
         
       
 
      
 
       
       
        
         
       
 
      
 
       
       
        
         
        
         进入婚礼
        
 
       
 
      
 
       
       
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
       
 
      
 
       
       
       
        点我送祝福
       
 
        
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
 
        
         一定要幸福哦~
        
 
        
         祝你们白头偕老！
        
 
        
         早生贵子~
        
 
        
         新婚快乐~
        
 
        
         生个宝宝认我做干妈！
        
 
        
         喜结良缘O(∩_∩)O哈哈哈~
        
 
        
         一定要幸福哦~
        
 
        
         祝你们白头偕老！
        
 
        
         早生贵子~
        
 
        
         新婚快乐~
        
 
        
         生个宝宝认我做干妈！
        
 
        
         喜结良缘O(∩_∩)O哈哈哈~
        
 
       
 
      
 
     
 
      
     
 
      
      送上祝福语
 
      写上您的祝福吧~ 
      
       确定

　　三、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); /* 进入场景三 */ }); }); }

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

　　场景三：

/* 场景三 */    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); /* 进入场景四 */ }

　　描述：场景三功能控制图片弹跳显示，我用for循环控制弹跳距离。

　　场景四：

/* 场景四 */    function scene4(){        $threeBox.hide();        $foreBox.fadeIn();        $foreImg.animate({top: "80px"},1000); setTimeout(scene5,2500); /* 进入场景五 */ }

　　描述：场景四控制图片从顶部往下滑落，停留1秒然后滑向右侧直至消失。

　　场景五：

/* 场景五 */    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); }) }

　　描述：场景六显现停留1.6秒，然后以碎片的形式向外散开，这个代码解释和类似，参考那边即可。

　　场景七：

/* 场景七 */    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 = '
     
      '+_writeVal+'
     
'; $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 = '
     
      '+_writeVal+'
     
'; $sevenContent.append(_div); /* 如果输入祝福语，将此标签添加的尾部 */ defineSevenDiv($sevenContent.find("div:last")); $popBox.animate({top: "-300px"},function(){ $mask.fadeOut(); draggableNote(); /* 可拖动卡片，给新添加的标签赋予拖动功能 */ }); }else{ alert("请输入祝福语！"); } }) } })

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

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

博文来源广泛，如原作者认为我侵犯知识产权，请尽快给我发邮件联系，我将以第一时间删除相关内容。