新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jquery版結(jié)婚電子請?zhí)?/div>
老姐看了jquery版小型婚禮(可動態(tài)添加祝福語),覺得還不錯,就讓我給他們做一個電子請?zhí)R呀?jīng)做了大半年了,懶著一直沒發(fā)……趁現(xiàn)在想起來了,就趕緊放上來讓大家看看。

一、圖片展示
1.開場動畫
新人開著小轎車緩緩向我們駛來,從這頭到那頭,其中的滋味醉在心頭。
2.首頁
首頁包括相冊、邀請函、祝福墻和婚禮地址。
1).相冊
相冊集,由12張小圖片組成一個心形,圖片自循環(huán)逐張變大再變小。
2).邀請函
兩情相悅只要證到手,又啟在朝朝暮暮。
3).祝福墻
祝福墻動畫:
留言板:
4).婚禮地址
#p#
二、代碼展示
1.html代碼
![]()
![]()
- 相冊
- 邀請函
- 祝福墻
- 婚禮地點
![]()
![]()
點我送祝福 一定要幸福哦~ 祝你們白頭偕老! 早生貴子~ 新婚快樂~ 生個寶寶認我做干媽! 喜結(jié)良緣O(∩_∩)O哈哈哈~ 一定要幸福哦~ 祝你們白頭偕老! 早生貴子~ 新婚快樂~ 生個寶寶認我做干媽! 喜結(jié)良緣O(∩_∩)O哈哈哈~![]()
![]()
![]()
![]()
送上祝福語
確定
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"), /* 邀請函內(nèi)容 */
- $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); /* 返回首頁時清除循環(huán) */
- 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 = '
'+_writeVal+'';- $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"); /* 婚禮地址導(dǎo)航 */
- $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"); /* 判斷圖片是行的(就是寬大于高) */
- /* 調(diào)用圖片放大 */
- becomeBig($own,hasClassPicRow);
- /* 隔2秒圖片自動縮小 */
- setTimeout(function(){becomeSmall($own,hasClassPicRow);},2000);
- /* 保證當前放大圖片為圖片總個數(shù)內(nèi),也就是說存在這個圖片 */
- 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, /* 多少行 */
新聞標題:jquery版結(jié)婚電子請?zhí)?
分享路徑:http://fisionsoft.com.cn/article/dpddgei.html


咨詢
建站咨詢
