Heim > Artikel > Web-Frontend > Beispielcode-Freigabe mit Javascript zur Implementierung des Edict-Scroll-Erweiterungseffekts

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

黄舟Original: 2017-03-23 14:26:591592Durchsuche

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:

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Codedetails von Funktionsaufrufen in JavaScriptNächster Artikel：Codedetails von Funktionsaufrufen in JavaScript

In Verbindung stehende Artikel

Mehr sehen