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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
理顺8个版本vue的区别(小结)
Sep 17 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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
php中unserialize返回false的解决方法
2014/09/22 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
js分页代码分享
2014/04/28 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python采集百度百科的方法
2015/06/05 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python得到windows自启动列表的方法
2018/10/14 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python匿名函数及应用示例
2019/04/09 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
python使用requests.session模拟登录
2019/08/09 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
python em算法的实现
2020/10/03 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
2014年党员自我评议对照检查材料
2014/09/20 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
教师求职信怎么写
2015/03/20 职场文书
Python+DeOldify实现老照片上色功能
2022/06/21 Python