javascript实现圣旨卷轴展开效果(代码分享)


Posted in Javascript onMarch 23, 2017

效果图:

javascript实现圣旨卷轴展开效果(代码分享)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jQuery 3.1.1.js"></script>
<title>诏书</title>
<style type="text/css">
body,ul,li,p,h1,h2,h3,h4,h5{
 margin:0;
 padding:0;
 font-size:100%;
}
body{
 font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', SimSun, 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
 font-size: 50px;
 background: #6f0b02;
}
img{
 border:0;
}
.content{
 position: relative;
 margin: 40px 0 0 -21px;
 width: 900px;
 height: 460px;
}
.l-pic-index{
 position: absolute;
 left: 400px;
 top: 1px;
 z-index:2;
 width:50px;
 height:460px;
 background: url("images/11.png") no-repeat right 0;
}
.r-pic-index{
 position: absolute;
 right: 400px;
 top: 0;
 z-index: 2;
 width:50px;
 *width:82px;
 height:460px;
 background: url("images/11.png") no-repeat left 0;
}
.l-bg-index{
 position: absolute;
 top: 20px;/*中间转轴位置*/
 left: 430px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("images/bg1.png") right 0 no-repeat;
}
.r-bg-index{
 position: absolute;
 top: 20px;
 right: 430px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("images/bg1.png") 0 0 no-repeat;
}
.main-index{
 display: none;
 overflow: hidden;
 zoom:1;
 position: absolute;
 z-index: 5;
 width:700px;
 height:280px;
 left:90px;
 top:90px;
 color: #2e2e2e;
}
.intro-text{
 margin: 10px 0 0 44px;
 line-height: 2;
 text-indent: 3px;
}
</style>
</head>
<body>
<div class="content">
  <div class="l-pic-index"></div><!--左转轴-->
  <div class="r-pic-index"></div><!--右转轴-->
  <div class="l-bg-index"></div>
  <div class="r-bg-index"></div>
  <div class="main-index">
   <!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
     <p class="intro-text">
      奉天承运皇帝诏曰:下班没?
     </p>
  </div>
 </div>
</body>
<script>
  window.onload = function(){
    //卷轴展开效果
  $(".l-pic-index").animate({'left':'50px','top':'-5px'},1450);
  $(".r-pic-index").animate({'right':'-60px','top':'-5px'},1450);
  $(".l-bg-index").animate({'width':'433px','left':'73px'},1500);
  $(".r-bg-index").animate({'width':'433px','right':'-38px'},1500,function(){
   $(".main-index").fadeIn(800);
  });
  }
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
对xmlHttp对象的理解
Jan 17 Javascript
js切换光标示例代码
Oct 10 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
浅析JS运动
Dec 28 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 #Javascript
angularJS深拷贝详解
Mar 23 #Javascript
canvas实现环形进度条效果
Mar 23 #Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 #Javascript
jquery实现图片平滑滚动详解
Mar 22 #jQuery
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 #Javascript
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
PHP中的替代语法介绍
2015/01/09 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
大二自我鉴定范文
2013/10/05 职场文书
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
先进教师事迹材料
2014/12/16 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
工作感言一句话
2015/08/01 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
vscode内网访问服务器的方法
2022/06/28 Servers