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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
vue父子组件通信的高级用法示例
Aug 29 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
Python引用模块和查找模块路径
2016/03/17 Python
python getopt详解及简单实例
2016/12/30 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
python的range和linspace使用详解
2019/11/27 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
失业者真诚求职信范文
2013/12/25 职场文书
总经理助理职责
2014/02/04 职场文书
车间主任岗位职责
2014/03/16 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书