日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
jquery版結(jié)婚電子請(qǐng)?zhí)?/div>

老姐看了jquery版小型婚禮（可動(dòng)態(tài)添加祝福語(yǔ)），覺(jué)得還不錯(cuò)，就讓我給他們做一個(gè)電子請(qǐng)?zhí)?。已?jīng)做了大半年了，懶著一直沒(méi)發(fā)……趁現(xiàn)在想起來(lái)了，就趕緊放上來(lái)讓大家看看。

一、圖片展示

1.開(kāi)場(chǎng)動(dòng)畫(huà)

新人開(kāi)著小轎車緩緩向我們駛來(lái)，從這頭到那頭，其中的滋味醉在心頭。

2.首頁(yè)

首頁(yè)包括相冊(cè)、邀請(qǐng)函、祝福墻和婚禮地址。

1).相冊(cè)

相冊(cè)集，由12張小圖片組成一個(gè)心形，圖片自循環(huán)逐張變大再變小。

2).邀請(qǐng)函

兩情相悅只要證到手，又啟在朝朝暮暮。

3).祝福墻

祝福墻動(dòng)畫(huà)：

留言板：

4).婚禮地址

#p#

二、代碼展示

1.html代碼

 
 
      
  
  1.  
    2.   
  
  2.  
    3.   
  
  3.    
    4.   
  
  4.        
    5.   
  
  5.      
    6.   
  
  6.      
    7.   
  
  7.      
    8.   
  
  8.    
    9.   
  
  9.    
    10.   
  
  10.    
    11.   
  
  11.    
    12.   
  
  12.      
    13.   
  
  13.          
    14.   
  
  14.          
    15.   
  
  15.              
    16.   
  
  16.              
    17.   
  
  17.         
 
  •  
  •          
  •          
  •              
  •                 
       
    •                     
    • 相冊(cè)
      •  
    •                     
    • 邀請(qǐng)函
      •  
    •                     
    • 祝福墻
      •  
    •                     
    • 婚禮地點(diǎn)
      •  
    •                 
     
  •             
    •  
  •         
    •  
  •  
  •          
  •          
  •              
  •              
  •             
    •  
  •         
    •  
  •  
  •          
  •          
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •         
    •  
  •  
  •          
  •          
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •             
     
  •         
    •  
  •  
  •          
  •          
  •              
  •             點(diǎn)我送祝福
    •  
  •              
  •                 
    •  
  •                 
    •  
  •                 
    •  
  •                 
    •  
  •                 
    •  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                 一定要幸福哦~ 
  •                 祝你們白頭偕老！ 
  •                 早生貴子~ 
  •                 新婚快樂(lè)~ 
  •                 生個(gè)寶寶認(rèn)我做干媽！ 
  •                 喜結(jié)良緣O(∩_∩)O哈哈哈~ 
  •                 一定要幸福哦~ 
  •                 祝你們白頭偕老！ 
  •                 早生貴子~ 
  •                 新婚快樂(lè)~ 
  •                 生個(gè)寶寶認(rèn)我做干媽！ 
  •                 喜結(jié)良緣O(∩_∩)O哈哈哈~ 
  •              
  •          
  •  
  •  
  •          
  •          
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •              
  •          
  •  
  •  
  •          
  •          
  •              
  •              
  •              
  •          
  •  
  •      
  •  
  •      
  •      
  •      
  •         

    送上祝福語(yǔ)

     
  •         寫(xiě)上您的祝福吧~ 
  •         確定 
  •      
  •  
  •      
  •      
  •          
  •          
  •          
  •          
  •      
  •  
  •      
  •      
  •      
  •  
  •    
  •  

    •  

    2.js代碼

     
 
        
  
    1. var sceneObject = { 
      2.   
  
    2.     init: function(){ 
      3.   
  
    3.         this._enterCar(); 
      4.   
  
    4.         this._enterInvitation(); 
      5.   
  
    5.         this._enterAlbum(); 
      6.   
  
    6.         this._enterWall(); 
      7.   
  
    7.         this._addBlessing(); 
      8.   
  
    8.         this._searchAddress(); 
      9.   
  
    9.     }, 
      10.   
  
    10.     /*---------------------------------移動(dòng)的婚車------------------------------*/ 
      11.   
  
    11.     _enterCar: function(){ 
      12.   
  
    12.         initCar(); 
      13.   
  
    13.  
      14.   
  
    14.         /* 婚車隨著窗口大小改變 */ 
      15.   
  
    15.         $(window).resize(function(){ 
      16.   
  
    16.             setCarPosition(); 
      17.   
  
    17.         }) 
      18.   
  
    18.     }, 
      19.   
  
    19.     /*---------------------------------進(jìn)入邀請(qǐng)函------------------------------*/ 
      20.   
  
    20.     _enterInvitation: function(){ 
      21.   
  
    21.          var $home = $(".home"), /* 首頁(yè) */ 
      22.   
  
    22.             $toInvitation = $("#to-invitation"), /* 邀請(qǐng)函按鈕 */ 
      23.   
  
    23.             $invitation = $(".invitation"), /* 邀請(qǐng)函模塊 */ 
      24.   
  
    24.             $invitationCt = $(".invitation-content"), /* 邀請(qǐng)函內(nèi)容 */ 
      25.   
  
    25.             $inviteReturn = $("#invite-return"); 
      26.   
  
    26.  
      27.   
  
    27.         $toInvitation.click(function(){ 
      28.   
  
    28.             $home.fadeOut(); /* 隱藏首頁(yè) */ 
      29.   
  
    29.             $invitation.fadeIn(); 
      30.   
  
    30.             $invitationCt.animate({"top": "0"},function(){ 
      31.   
  
    31.                 $inviteReturn.fadeIn(); 
      32.   
  
    32.             }); 
      33.   
  
    33.         }) 
      34.   
  
    34.          
      35.   
  
    35.         /* 邀請(qǐng)函中點(diǎn)擊返回按鈕 */ 
      36.   
  
    36.         $inviteReturn.click(function(){ 
      37.   
  
    37.             $invitationCt.css({"top": "-540px"}); 
      38.   
  
    38.             $invitation.fadeOut(function(){ 
      39.   
  
    39.                 $inviteReturn.fadeOut(); 
      40.   
  
    40.                 $home.fadeIn(600); 
      41.   
  
    41.             }); 
      42.   
  
    42.         }) 
      43.   
  
    43.     }, 
      44.   
  
    44.      /*---------------------------------進(jìn)入相冊(cè)------------------------------*/ 
      45.   
  
    45.     _enterAlbum: function(){ 
      46.   
  
    46.         var $home = $(".home"), /* 首頁(yè) */ 
      47.   
  
    47.              $toPicture = $("#to-picture"), 
      48.   
  
    48.              $pictureWall = $(".picture-wall"), 
      49.   
  
    49.              timer; 
      50.   
  
    50.  
      51.   
  
    51.         $toPicture.click(function(){ 
      52.   
  
    52.             $home.fadeOut(function(){/* 隱藏首頁(yè) */ 
      53.   
  
    53.                 $pictureWall.fadeIn(); /* 顯示相冊(cè) */ 
      54.   
  
    54.                 autoPicWall(); 
      55.   
  
    55.                 timer = setInterval(autoPicWall,4000); /* 照片自動(dòng)播放 */ 
      56.   
  
    56.             }); 
      57.   
  
    57.         }) 
      58.   
  
    58.  
      59.   
  
    59.         /* 點(diǎn)擊照片墻中返回按鈕 */ 
      60.   
  
    60.         $("#picture-return").click(function(){ 
      61.   
  
    61.             clearInterval(timer); /* 返回首頁(yè)時(shí)清除循環(huán) */ 
      62.   
  
    62.             picPage = 0; /* 并且顯示圖片為0，也就是下一次進(jìn)入時(shí)又從0開(kāi)始 */ 
      63.   
  
    63.             $pictureWall.fadeOut(function(){ 
      64.   
  
    64.                 $home.fadeIn(); 
      65.   
  
    65.             }) 
      66.   
  
    66.         }) 
      67.   
  
    67.     }, 
      68.   
  
    68.      /*---------------------------------進(jìn)入祝福墻-------------------------------*/ 
      69.   
  
    69.     _enterWall: function(){ 
      70.   
  
    70.         var $home = $(".home"), 
      71.   
  
    71.                 $uEnter = $("#to-wall"); /* 進(jìn)入祝福墻按鈕 */ 
      72.   
  
    72.                  
      73.   
  
    73.  
      74.   
  
    74.         $uEnter.click(function(){ 
      75.   
  
    75.             $home.hide(); 
      76.   
  
    76.             setTimeout(scene6,400); /* 進(jìn)入祝福墻場(chǎng)景動(dòng)畫(huà) */ 
      77.   
  
    77.         }) 
      78.   
  
    78.     }, 
      79.   
  
    79.     /*---------------------------------添加祝福語(yǔ)-------------------------------*/ 
      80.   
  
    80.     _addBlessing: function(){ 
      81.   
  
    81.            var $home = $(".home"), 
      82.   
  
    82.                 $sevenDiv = $(".seven-content div"), 
      83.   
  
    83.                 $clickMe = $(".clickMe"), 
      84.   
  
    84.                 $mask = $(".mask"), 
      85.   
  
    85.                 $popBox = $(".pop-box"), 
      86.   
  
    86.                 $write = $("#write"), 
      87.   
  
    87.                 $uSure = $("#uSure"), 
      88.   
  
    88.                 $sevenContent = $(".seven-content"); 
      89.   
  
    89.  
      90.   
  
    90.         /* 拖動(dòng)祝?？ㄆ?nbsp;*/ 
      91.   
  
    91.         draggableNote(); 
      92.   
  
    92.  
      93.   
  
    93.          /* 點(diǎn)我送祝福 */ 
      94.   
  
    94.         $clickMe.click(function(){ 
      95.   
  
    95.             $write.val("送上您的祝福吧~"); 
      96.   
  
    96.             $mask.fadeIn(); 
      97.   
  
    97.             $popBox.animate({top: "50%"}); 
      98.   
  
    98.         }) 
      99.   
  
    99.  
      100.   
  
    100.         /* 獲取焦點(diǎn)時(shí) */ 
      101.   
  
    101.         $write.focus(function(){ 
      102.   
  
    102.             var _val = $(this).val(); 
      103.   
  
    103.             if(_val == "送上您的祝福吧~"){ 
      104.   
  
    104.                 $(this).val(""); 
      105.   
  
    105.             } 
      106.   
  
    106.         }) 
      107.   
  
    107.         /* 丟失焦點(diǎn)時(shí) */ 
      108.   
  
    108.         $write.blur(function(){ 
      109.   
  
    109.             var _val = $(this).val(); 
      110.   
  
    110.             if(_val.length == 0){ 
      111.   
  
    111.                 $(this).val("送上您的祝福吧~"); 
      112.   
  
    112.             } 
      113.   
  
    113.         }) 
      114.   
  
    114.  
      115.   
  
    115.         /* 確定添加祝福語(yǔ) */ 
      116.   
  
    116.         $uSure.click(function(){ 
      117.   
  
    117.             var _writeVal = $write.val(), 
      118.   
  
    118.                  _randomNum = Math.ceil(Math.random()*6); 
      119.   
  
    119.  
      120.   
  
    120.             if(_writeVal != "送上您的祝福吧~"){ 
      121.   
  
    121.                 var _div = ''+_writeVal+''; 
      122.   
  
    122.                 $sevenContent.append(_div); /* 如果輸入祝福語(yǔ)，將此標(biāo)簽添加的尾部 */ 
      123.   
  
    123.                 defineSevenDiv($sevenContent.find("div:last")); 
      124.   
  
    124.                 $popBox.animate({top: "-300px"},function(){ 
      125.   
  
    125.                     $mask.fadeOut(); 
      126.   
  
    126.                     draggableNote(); /* 可拖動(dòng)卡片，給新添加的標(biāo)簽賦予拖動(dòng)功能 */ 
      127.   
  
    127.                 }); 
      128.   
  
    128.             }else{ 
      129.   
  
    129.                 alert("請(qǐng)輸入祝福語(yǔ)！"); 
      130.   
  
    130.             } 
      131.   
  
    131.         }) 
      132.   
  
    132.  
      133.   
  
    133.         /* 祝福墻中返回首頁(yè) */ 
      134.   
  
    134.         $("#blessing-return").click(function(){ 
      135.   
  
    135.             $(".seven-box").fadeOut(function(){ 
      136.   
  
    136.                 $home.fadeIn(); 
      137.   
  
    137.             }) 
      138.   
  
    138.         }) 
      139.   
  
    139.     }, 
      140.   
  
    140.      /*---------------------------------查看婚禮地址-------------------------------*/ 
      141.   
  
    141.     _searchAddress: function(){ 
      142.   
  
    142.         var $home = $(".home"), 
      143.   
  
    143.              $toAddress = $("#to-address"); /* 婚禮地址導(dǎo)航 */ 
      144.   
  
    144.              $address = $(".address"), /* 婚禮地址圖 */ 
      145.   
  
    145.              $addressReturn = $("#address-return"); 
      146.   
  
    146.  
      147.   
  
    147.         $toAddress.click(function(){ 
      148.   
  
    148.             $home.fadeOut(); 
      149.   
  
    149.             $address.fadeIn(); 
      150.   
  
    150.         }) 
      151.   
  
    151.  
      152.   
  
    152.         /* 婚禮地址返回首頁(yè) */ 
      153.   
  
    153.         $addressReturn.click(function(){ 
      154.   
  
    154.             $address.fadeOut(); 
      155.   
  
    155.             $home.fadeIn(); 
      156.   
  
    156.         }) 
      157.   
  
    157.     } 
      158.   
  
    158. } 
      159.   
  
    159.  
      160.   
  
    160.  
      161.   
  
    161. /*---------------------------------移動(dòng)的小車-------------------------------*/ 
      162.   
  
    162. function initCar(){ 
      163.   
  
    163.     var $home = $(".home"); /* 首頁(yè) */ 
      164.   
  
    164.     setCarPosition(); 
      165.   
  
    165.     setTimeout(function(){ 
      166.   
  
    166.         $home.fadeIn(); 
      167.   
  
    167.     },6500); 
      168.   
  
    168. } 
      169.   
  
    169.  
      170.   
  
    170. /* 婚車位置定位和滑動(dòng)方法 */ 
      171.   
  
    171. function setCarPosition(){ 
      172.   
  
    172.     var $car = $(".car"), 
      173.   
  
    173.           wWidth = $(window).width(), /* 文檔寬度 */ 
      174.   
  
    174.           wHeight = $(window).height(), /* 窗口高度 */ 
      175.   
  
    175.           carWidth = $car.height(), /* 婚車寬度 */ 
      176.   
  
    176.           carHeight = $car.height(); /* 婚車高度 */ 
      177.   
  
    177.     $car.css({top:wHeight - carHeight - 100}); 
      178.   
  
    178.     $car.animate({left: wWidth - carWidth + 100},8000).fadeOut(); 
      179.   
  
    179. } 
      180.   
  
    180.  
      181.   
  
    181.  
      182.   
  
    182. /*---------------------------------圖片墻-------------------------------*/ 
      183.   
  
    183. var  picPage = 0, /* 當(dāng)前是第幾張圖片放大和縮小 */ 
      184.   
  
    184.        picLeft, /* 圖片左邊距離 */ 
      185.   
  
    185.        picTop; /* 圖片上部定位距離 */ 
      186.   
  
    186.  
      187.   
  
    187. /* 自動(dòng)放大縮小圖片方法 */ 
      188.   
  
    188. function autoPicWall(){ 
      189.   
  
    189.     var $pictureWallPic = $(".picture-wall div"), 
      190.   
  
    190.          $own = $pictureWallPic.eq(picPage), 
      191.   
  
    191.          isBig = $own.hasClass("bigCenter"), /* 放大時(shí)有這個(gè)class */ 
      192.   
  
    192.          hasClassPicRow = $own.hasClass("picRow"); /* 判斷圖片是行的（就是寬大于高） */ 
      193.   
  
    193.  
      194.   
  
    194.     /* 調(diào)用圖片放大 */ 
      195.   
  
    195.     becomeBig($own,hasClassPicRow); 
      196.   
  
    196.  
      197.   
  
    197.     /* 隔2秒圖片自動(dòng)縮小 */ 
      198.   
  
    198.     setTimeout(function(){becomeSmall($own,hasClassPicRow);},2000); 
      199.   
  
    199.  
      200.   
  
    200.     /* 保證當(dāng)前放大圖片為圖片總個(gè)數(shù)內(nèi)，也就是說(shuō)存在這個(gè)圖片 */ 
      201.   
  
    201.     if(picPage < $pictureWallPic.length - 1){ 
      202.   
  
    202.         picPage++; 
      203.   
  
    203.     }else if(picPage == $pictureWallPic.length - 1){ /* 如果當(dāng)前圖片為***一張圖片，則又從***張圖片開(kāi)始顯示 */ 
      204.   
  
    204.         picPage = 0; 
      205.   
  
    205.     } 
      206.   
  
    206.  
      207.   
  
    207. } 
      208.   
  
    208.  
      209.   
  
    209. /* 圖片變大方法 */ 
      210.   
  
    210. function becomeBig($own,hasClassPicRow){ 
      211.   
  
    211.     var $mask = $(".mask"), 
      212.   
  
    212.           pictureWallWidth = $(".picture-wall").width(), 
      213.   
  
    213.           pictureWallHeight = $(".picture-wall").height(); 
      214.   
  
    214.  
      215.   
  
    215.     picLeft = $own.css("left"); /* 原始絕對(duì)定位left值 */ 
      216.   
  
    216.     picTop = $own.css("top"); /* 原始絕對(duì)定位top值 */ 
      217.   
  
    217.     $own.toggleClass("bigCenter"); /* 添加放大的class屬性 */ 
      218.   
  
    218.     $mask.fadeIn(); 
      219.   
  
    219.  
      220.   
  
    220.     /* 圖片為行圖片，也就是寬度大于高度 */ 
      221.   
  
    221.     if(hasClassPicRow){ 
      222.   
  
    222.         for(var i = 120; i < 720; i+=20){ 
      223.   
  
    223.             $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2); 
      224.   
  
    224.             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2); 
      225.   
  
    225.         } 
      226.   
  
    226.     }else{ 
      227.   
  
    227.         for(var i = 80; i < 480; i+=20){ 
      228.   
  
    228.             $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2); 
      229.   
  
    229.             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2); 
      230.   
  
    230.         } 
      231.   
  
    231.     } 
      232.   
  
    232. } 
      233.   
  
    233.  
      234.   
  
    234. /* 圖片縮小方法 */ 
      235.   
  
    235. function becomeSmall($own,hasClassPicRow){ 
      236.   
  
    236.     var $mask = $(".mask"), 
      237.   
  
    237.           pictureWallWidth = $(".picture-wall").width(), 
      238.   
  
    238.           pictureWallHeight = $(".picture-wall").height(); 
      239.   
  
    239.  
      240.   
  
    240.     if(hasClassPicRow){ 
      241.   
  
    241.         for(var i = 720; i >= 120; i-=40){ 
      242.   
  
    242.             $own.find("img").animate({"width": i+"px", "height": i/1.5+"px"},2); 
      243.   
  
    243.             /* 圖片縮小到中心位置 */ 
      244.   
  
    244.             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i/1.5)/2+"px"},2); 
      245.   
  
    245.         } 
      246.   
  
    246.     }else{ 
      247.   
  
    247.         for(var i = 480; i >= 80; i-=40){ 
      248.   
  
    248.             $own.find("img").animate({"width": i+"px", "height": i*1.5+"px"},2); 
      249.   
  
    249.             /* 圖片縮小到中心位置 */ 
      250.   
  
    250.             $own.animate({"left": (pictureWallWidth-i)/2+"px", "top": (pictureWallHeight-i*1.5)/2+"px"},2); 
      251.   
  
    251.         } 
      252.   
  
    252.     } 
      253.   
  
    253.      
      254.   
  
    254.     /* 圖片縮小到中心位置后，回到原始位置 */ 
      255.   
  
    255.     $own.animate({"left": picLeft, "top": picTop},400,function(){ 
      256.   
  
    256.         $mask.fadeOut(); /* 隱藏遮罩層 */ 
      257.   
  
    257.         $own.toggleClass("bigCenter"); /* 去除放大的class屬性 */ 
      258.   
  
    258.     }); 
      259.   
  
    259. } 
      260.   
  
    260.  
      261.   
  
    261.  
      262.   
  
    262.                  
      263.   
  
    263. /*---------------------------------祝福墻進(jìn)入動(dòng)畫(huà)-------------------------------*/ 
      264.   
  
    264. var colCount = 4, /* 多少列 */ 
      265.   
  
    265.         rowCount = 4, /* 多少行 */ 
      266.   
  
    266.                                                      
      
                                                網(wǎng)站名稱：jquery版結(jié)婚電子請(qǐng)?zhí)?                                               
      
                                                本文路徑：http://www.dlmjj.cn/article/dpddgei.html
                                            
                                            
                                        
                                    
                                
                            
                        
                    
                
            
        
    










          3.