2018年1月11日 星期四

(CSS)(JS)聖旨卷軸效果


HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<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> -->
  
     <div class="intro-text">
   <div class="first">奉</div>
   <div>天承運皇帝詔曰</div>
   <div>用盡我所有努力絞盡我所有腦力經過我千思萬想獻你我一片心意恰似比洛陽紙貴更勝似千金一擲祝君平安福氣多日進斗金財富來</div>
     </div>
  </div>
 </div>
JS

1
2
3
4
5
6
7
  //卷轴展开效果 Document Ready
  $(".l-pic-index").animate({'left':'50px','top':'0px'},1450);
  $(".r-pic-index").animate({'right':'-60px','top':'0px'},1450);
  $(".l-bg-index").animate({'width':'236px','left':'73px'},1500);
  $(".r-bg-index").animate({'width':'236px','right':'-38px'},1500,function(){
   $(".main-index").fadeIn(800);
  });
CSS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
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;
 background: #6f0b02;
}
img{
 border:0;
}
.content{
 position: relative;
 margin: 40px 0 0 -21px;
 width: 500px;
 height: 460px;
}
.l-pic-index{
 position: absolute;
 left: 200px;
 top: 1px;
 z-index:2;
 width:50px;
 height:460px;
 background: url("https://i.imgur.com/muLgAEn.png") no-repeat right 0;
}
.r-pic-index{
 position: absolute;
 right: 200px;
 top: 0;
 z-index: 2;
 width:50px;
 *width:82px;
 height:460px;
 background: url("https://i.imgur.com/C1a5S59.png") no-repeat left 0;
}
.l-bg-index{
 position: absolute;
// top: 20px;/*中间转轴位置*/
 left: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/ospnj28.png") right 0 no-repeat;
}
.r-bg-index{
 position: absolute;
 right: 230px;
 z-index: 1;
 width: 25px;
 height: 459px;
 background: url("https://i.imgur.com/9Kl8d5Y.png") 0 0 no-repeat;
}
.main-index{
 display: none;
 overflow: hidden;
 zoom:1;
 position: absolute;
 z-index: 5;
 width:900px;
 height:250px;
 left:95px;
 top:75px;
 color: #2e2e2e;

}
.intro-text{
 writing-mode: vertical-rl;
 font-size:32px;

}


 .first
{
 text-indent:1em;
 
}
有空再來解析先備份
來源：http://www.paobuke.com/zh-tw/develop/javascript/pbk43018.html、http://588ku.com/sucai/7140313.html

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)