javascript實現聖旨捲軸展開效果的範例程式碼分享-js教程-PHP中文網

javascript實現聖旨捲軸展開效果的範例程式碼分享

黄舟

發布： 2017-03-23 14:26:59

原創

1595 人瀏覽過

本文主要介紹了javascript實作聖旨捲軸展開效果的範例程式碼。具有很好的參考價值。下面跟著小編一起來看下吧

效果圖：

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: &#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>

登入後複製

以上是javascript實現聖旨捲軸展開效果的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！