首页 > 编程 > JavaScript > 正文

jquery结婚电子请柬特效源码分享

2019-11-20 11:46:21
字体:
来源:转载
供稿:网友

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结婚电子请柬特效,希望大家可以喜欢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表