你的位置:首页 > Java教程

[Java教程]基于jquery结婚电子请柬特效素材


分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <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" >返回首页</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>

via:http://www.w2bc.com/Article/40317