javascript实现圣旨卷轴展开效果（代码分享）

更新时间：2017年03月23日 09:02:34 作者：kb码农

本文主要介绍了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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

js
展开

javascript按指定格式输出文件最后更新时间
javascript按指定格式输出文件最后更新时间...
2007-08-08
Js动态添加复选框Checkbox的实例方法
Js动态添加复选框Checkbox的实例方法，需要的朋友可以参考一下
2013-04-04
JavaScript实现淘宝购物件数选择
这篇文章主要为大家详细介绍了JavaScript实现淘宝购物件数的选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
这篇文章主要介绍了JS实现商城秒杀倒计时功能（动态设置秒杀时间）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
微信小程序搭建自己的Https服务器
这篇文章主要介绍了微信小程序搭建Https服务器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
javascript实现随机生成DIV背景色
这篇文章主要介绍了javascript实现随机生成DIV背景色的具体代码，如何设置DIV背景色为随机色，感兴趣的小伙伴们可以参考一下
2016-06-06
React类组件转换成函数式组件
Hooks让我们为相同的功能编写更少的代码,我们需要编写的代码越少,我们就可以越快地启动应用程序,hooks需要在函数组件中使用,您不能在 React 类中使用 hooks,函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件
2024-01-01
html2canvas图片跨域问题图文详解
我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下
2023-03-03
微信小程序获取手机号的踩坑记录
这篇文章主要给大家介绍了关于微信小程序获取手机号踩坑的相关资料,详细记录了踩坑的过程以及解决的方法和猜想,通过示例代码以及图片介绍的非常详细,需要的朋友可以参考下
2021-06-06
JS瀑布流实现方法实例分析
这篇文章主要介绍了JS瀑布流实现方法,结合实例形式分析了javascript瀑布流加载图片效果的实现原理、步骤与相关操作技巧,需要的朋友可以参考下
2016-12-12