jquery結婚電子請柬特效素材總共包含3個部分，第一部分是開著小轎車緩緩進入場景，第二部分是相冊，第三部分是祝福墻。
不管現在還是以后會用到，總之先學會制作jquery結婚電子請柬，留著以后派上大用場，這個要比過去傳統的請柬新穎多了。
先來是視覺上的享受
---------------------------------------效果查看 源碼下載---------------------------------------
開著小轎車緩緩進入場景
相冊展示
邀請函
祝福墻
為大家分享的jquery結婚電子請柬特效代碼如下
<!DOCTYPE HTML ><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>jquery結婚電子請柬特效</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <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> </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"> <h1>送上祝福語</h1> <textarea id="write">寫上您的祝福吧~</textarea> <div class="u-sure" id="uSure">確定</div> </div> <!-- 背景音樂 --> <embed src="#" width="0" height="0" autostart="true" loop="true"> <object data="#" 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><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>以上就是分享的jquery結婚電子請柬特效，希望大家可以喜歡。
新聞熱點
疑難解答
