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


Posted in Javascript onAugust 21, 2015

jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙。
不管现在还是以后会用到,总之先学会制作jquery结婚电子请柬,留着以后派上大用场,这个要比过去传统的请柬新颖多了。

先来是视觉上的享受

---------------------------------------效果查看 源码下载---------------------------------------

开着小轿车缓缓进入场景

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

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

相册展示

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

邀请函

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

祝福墙

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

Javascript 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
JavaScript使用localStorage存储数据
Sep 25 Javascript
js实现列表按字母排序
Aug 11 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 #Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 #Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 #Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 #Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 #Javascript
纯javascript实现图片延时加载方法
Aug 21 #Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 #Javascript
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
JavaScript如何操作css
2020/10/24 Javascript
js实现筛选功能
2020/11/24 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python 多进程和数据传递的理解
2017/10/09 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python使用贪婪算法解决问题
2019/10/22 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
总裁办公室主任职责
2014/01/02 职场文书
成人继续教育实施方案
2014/03/01 职场文书
董事长秘书工作职责
2014/06/10 职场文书
学校教研活动总结
2014/07/02 职场文书
家长学校培训材料
2014/08/20 职场文书
市场营销工作计划书
2014/09/15 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers