Sample code sharing using javascript to implement the edict scroll expansion effect-JS Tutorial-php.cn

Sample code sharing using javascript to implement the edict scroll expansion effect

黄舟

Release： 2017-03-23 14:26:59

Original

1633 people have browsed it

This article mainly introduces javascriptthe sample code to realize the expansion effect of the imperial edict scroll. Has very good reference value. Let’s take a look at it with the editor below

Rendering:

Sample code sharing using javascript to implement the edict scroll expansion effect

##The code is as follows:

<!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: &#39;Microsoft YaHei UI&#39;, &#39;Microsoft YaHei&#39;, SimSun, &#39;Segoe UI&#39;, 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>
<p class="content">
  <p class="l-pic-index"></p><!--左转轴-->
  <p class="r-pic-index"></p><!--右转轴-->
  <p class="l-bg-index"></p>
  <p class="r-bg-index"></p>
  <p class="main-index">
   <!-- <h1 class="title"><img src="./img/intro-title.png" alt=""></h1> -->
     <p class="intro-text">
      奉天承运皇帝诏曰：下班没？
     </p>
  </p>
 </p>
</body>
<script>
  window.onload = function(){
    //卷轴展开效果
  $(".l-pic-index").animate({&#39;left&#39;:&#39;50px&#39;,&#39;top&#39;:&#39;-5px&#39;},1450);
  $(".r-pic-index").animate({&#39;right&#39;:&#39;-60px&#39;,&#39;top&#39;:&#39;-5px&#39;},1450);
  $(".l-bg-index").animate({&#39;width&#39;:&#39;433px&#39;,&#39;left&#39;:&#39;73px&#39;},1500);
  $(".r-bg-index").animate({&#39;width&#39;:&#39;433px&#39;,&#39;right&#39;:&#39;-38px&#39;},1500,function(){
   $(".main-index").fadeIn(800);
  });
  }
</script>
</html>

Copy after login

The above is the detailed content of Sample code sharing using javascript to implement the edict scroll expansion effect. For more information, please follow other related articles on the PHP Chinese website!