溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么實現jquery版結婚電子請帖，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
老姐看了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"> <h2>送上祝福語</h2> <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(); })看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
