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 相关文章推荐
jQuery中:empty选择器用法实例
Dec 30 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php获取文件大小的方法
2014/02/26 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
安装dbus-python的简要教程
2015/05/05 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
建筑自我鉴定
2013/10/19 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
业务总经理岗位职责
2014/02/03 职场文书
小学生暑假家长评语
2014/04/17 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫