jquery wedding electronic invitation special effects source code sharing

Home

Web Front-end

JS Tutorial

jquery wedding electronic invitation special effects source code sharing_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

jquerymarry

The jquery wedding electronic invitation special effects material contains a total of 3 parts. The first part is driving a car slowly into the scene, the second part is the photo album, and the third part is the blessing wall.
Regardless of whether it will be used now or in the future, in short, learn to make jquery wedding electronic invitations first, and save them for future use. This is much more novel than the traditional invitations in the past.

The first thing is the visual enjoyment

---------------------------------------------View effect Source code download----------------------------- ---------------

Driving a car and slowly entering the scene

Album display

Invitation

Wall of Blessings

The jquery wedding e-invitation special effects code shared with you is as follows

<!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 lazy"  src="/static/imghwm/default1.png"  data-src="images/moveCar.png" / alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <img  class="u-dog lazy"  src="/static/imghwm/default1.png"  data-src="images/ballon.gif" / alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
  </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 lazy"  src="/static/imghwm/default1.png"  data-src="images/btn_return.png"  id="invite-return"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <div class="invitation-content"></div>
  </div>

  <!-- 婚纱照 -->
  <div class="wedding-photos">
   <div><img  src="/static/imghwm/default1.png"  data-src="images/photo1.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div><img  src="/static/imghwm/default1.png"  data-src="images/photo2.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div><img  src="/static/imghwm/default1.png"  data-src="images/photo3.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div><img  src="/static/imghwm/default1.png"  data-src="images/photo4.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div><img  src="/static/imghwm/default1.png"  data-src="images/photo5.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></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  class="u-return lazy"  src="/static/imghwm/default1.png"  data-src="images/btn_return.png"  id="blessing-return"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <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 lazy"  src="/static/imghwm/default1.png"  data-src="images/btn_return.png"  id="picture-return"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <div class="pic0 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic0.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic1 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic1.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic2 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic2.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic3 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic3.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic4 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic4.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic5 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic5.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic6 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic6.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic7 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic7.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic8 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic8.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic9 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic9.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic10 picCol"><img  src="/static/imghwm/default1.png"  data-src="images/pic10.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
   <div class="pic11 picRow"><img  src="/static/imghwm/default1.png"  data-src="images/pic11.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" ></div>
  </div>


  <!-- 婚礼地址 -->
  <div class="address">
   <img  class="u-return lazy"  src="/static/imghwm/default1.png"  data-src="images/btn_return.png"  id="address-return"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <img  class="u-love lazy"  src="/static/imghwm/default1.png"  data-src="images/love.gif" / alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
   <img  src="/static/imghwm/default1.png"  data-src="images/address.jpg"  class="lazy"/ alt="jquery wedding electronic invitation special effects source code sharing_jquery" >
  </div>

 </div>

 <!-- 遮罩层 -->
 <div class="mask"></div>
 <div class="pop-box">
  <h1 id="送上祝福语">送上祝福语</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>

The above is the jquery wedding e-invitation special effects shared, I hope you can like it.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn