Beispielcode-Freigabe mit Javascript zur Implementierung des Edict-Scroll-Erweiterungseffekts-js-Tutorial-php.cn

Beispielcode-Freigabe mit Javascript zur Implementierung des Edict-Scroll-Erweiterungseffekts

黄舟

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

Original

1644 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von Javascript vorgestellt, um den Erweiterungseffekt der kaiserlichen Ediktrolle zu realisieren. Hat einen sehr guten Referenzwert. Schauen wir es uns mit dem Editor unten an

Rendering:

Beispielcode-Freigabe mit Javascript zur Implementierung des Edict-Scroll-Erweiterungseffekts

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe mit Javascript zur Implementierung des Edict-Scroll-Erweiterungseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!