Authored by 王水玲

年度账单修改

27.5 KB | W: | H:

21.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

74.4 KB | W: | H:

123 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

118 KB | W: | H:

120 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

24.6 KB | W: | H:

29.7 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
@@ -19,8 +19,12 @@ function audioAction() { @@ -19,8 +19,12 @@ function audioAction() {
19 $audio[0].play(); 19 $audio[0].play();
20 }, false); 20 }, false);
21 21
  22 + setTimeout(function() {
  23 + $audio[0].play();
  24 + }, 1000);
  25 +
22 $('.audio-btn').on('click', function() { 26 $('.audio-btn').on('click', function() {
23 - if ($(this).hasClass('audio-f')) { 27 + if ($audio[0].paused) {
24 $(this).removeClass('audio-f'); 28 $(this).removeClass('audio-f');
25 $audio[0].play(); 29 $audio[0].play();
26 audioStatus = true; 30 audioStatus = true;
@@ -62,7 +66,9 @@ $(function() { @@ -62,7 +66,9 @@ $(function() {
62 $tB = $('.txt-black'), 66 $tB = $('.txt-black'),
63 $tW = $('.txt-white'), 67 $tW = $('.txt-white'),
64 $hand = $('.hand'), 68 $hand = $('.hand'),
65 - $commonH = $('.ch'); 69 + $commonH = $('.ch'),
  70 + $monthList = $('.month-list');
  71 + var tbTime, handTime, twTime;
66 72
67 $commonH.css({height: $(window).height()}); 73 $commonH.css({height: $(window).height()});
68 74
@@ -78,8 +84,6 @@ $(function() { @@ -78,8 +84,6 @@ $(function() {
78 84
79 mySwiper = new Swiper('.swiper-container', { 85 mySwiper = new Swiper('.swiper-container', {
80 direction: 'vertical', 86 direction: 'vertical',
81 - noSwiping: true,  
82 - noSwipingClass: 'stop-swiping',  
83 onSlideChangeEnd: function(swiper) { 87 onSlideChangeEnd: function(swiper) {
84 var aIndex = swiper.activeIndex; 88 var aIndex = swiper.activeIndex;
85 89
@@ -93,10 +97,11 @@ $(function() { @@ -93,10 +97,11 @@ $(function() {
93 if (aIndex === 2) { 97 if (aIndex === 2) {
94 $purdahLeft.addClass('purdah-l-animation'); 98 $purdahLeft.addClass('purdah-l-animation');
95 $purdahRight.addClass('purdah-r-animation'); 99 $purdahRight.addClass('purdah-r-animation');
  100 + $monthList.fadeIn();
96 } 101 }
97 102
98 if (aIndex === 3) { 103 if (aIndex === 3) {
99 - $runMen.fadeIn(500); 104 + $runMen.fadeIn();
100 } 105 }
101 106
102 if (aIndex !== 4) { 107 if (aIndex !== 4) {
@@ -108,20 +113,21 @@ $(function() { @@ -108,20 +113,21 @@ $(function() {
108 } 113 }
109 114
110 if (aIndex === 4) { 115 if (aIndex === 4) {
111 - $videoBox.css({  
112 - opacity: 1  
113 - }).addClass('video-animation'); 116 + $videoBox.addClass('video-animation');
  117 + setTimeout(function() {
  118 + $('#video').show();
  119 + }, 600);
114 } 120 }
115 121
116 if (aIndex === 5) { 122 if (aIndex === 5) {
117 $spokesman.addClass('spokesman-animation'); 123 $spokesman.addClass('spokesman-animation');
118 - setTimeout(function() { 124 + tbTime = setTimeout(function() {
119 $tB.addClass('txt-animation'); 125 $tB.addClass('txt-animation');
120 }, 500); 126 }, 500);
121 - setTimeout(function() { 127 + handTime = setTimeout(function() {
122 $hand.addClass('hand-animation'); 128 $hand.addClass('hand-animation');
123 }, 1000); 129 }, 1000);
124 - setTimeout(function() { 130 + twTime = setTimeout(function() {
125 $tW.addClass('txt-animation'); 131 $tW.addClass('txt-animation');
126 }, 1500); 132 }, 1500);
127 } 133 }
@@ -132,6 +138,7 @@ $(function() { @@ -132,6 +138,7 @@ $(function() {
132 if (aIndex === 1 || aIndex === 3) { 138 if (aIndex === 1 || aIndex === 3) {
133 $purdahLeft.removeClass('purdah-l-animation'); 139 $purdahLeft.removeClass('purdah-l-animation');
134 $purdahRight.removeClass('purdah-r-animation'); 140 $purdahRight.removeClass('purdah-r-animation');
  141 + $monthList.fadeOut();
135 } 142 }
136 143
137 if (aIndex === 0 || aIndex === 2) { 144 if (aIndex === 0 || aIndex === 2) {
@@ -144,12 +151,14 @@ $(function() { @@ -144,12 +151,14 @@ $(function() {
144 } 151 }
145 152
146 if (aIndex === 3 || aIndex === 5) { 153 if (aIndex === 3 || aIndex === 5) {
147 - $videoBox.css({  
148 - opacity: 0  
149 - }).removeClass('video-animation'); 154 + $videoBox.removeClass('video-animation');
  155 + $('#video').hide();
150 } 156 }
151 157
152 if (aIndex === 4 || aIndex === 6) { 158 if (aIndex === 4 || aIndex === 6) {
  159 + clearTimeout(tbTime);
  160 + clearTimeout(twTime);
  161 + clearTimeout(handTime);
153 $spokesman.removeClass('spokesman-animation'); 162 $spokesman.removeClass('spokesman-animation');
154 $tB.removeClass('txt-animation'); 163 $tB.removeClass('txt-animation');
155 $hand.removeClass('hand-animation'); 164 $hand.removeClass('hand-animation');
@@ -58,7 +58,7 @@ @@ -58,7 +58,7 @@
58 } 58 }
59 59
60 .n2-img-animation { 60 .n2-img-animation {
61 - transition: all 1.5s; 61 + transition: all 1.2s;
62 transform: scale(1.5); 62 transform: scale(1.5);
63 opacity: 0; 63 opacity: 0;
64 } 64 }
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 opacity: 0; 74 opacity: 0;
75 75
76 &.purdah1-animation { 76 &.purdah1-animation {
77 - transition: all 1.5s; 77 + transition: all 1.2s;
78 opacity: 1; 78 opacity: 1;
79 } 79 }
80 } 80 }
@@ -163,12 +163,12 @@ @@ -163,12 +163,12 @@
163 } 163 }
164 164
165 .purdah-l-animation { 165 .purdah-l-animation {
166 - transition: all 1.5s; 166 + transition: all 1.2s;
167 transform: translate(-85%, 0); 167 transform: translate(-85%, 0);
168 } 168 }
169 169
170 .purdah-r-animation { 170 .purdah-r-animation {
171 - transition: all 1.5s; 171 + transition: all 1.2s;
172 transform: translate(85%, 0); 172 transform: translate(85%, 0);
173 } 173 }
174 174
@@ -202,7 +202,7 @@ @@ -202,7 +202,7 @@
202 } 202 }
203 203
204 .hand-animation { 204 .hand-animation {
205 - transition: all 0.5s; 205 + transition: all 0.4s;
206 bottom: 0; 206 bottom: 0;
207 opacity: 1; 207 opacity: 1;
208 z-index: 3; 208 z-index: 3;
@@ -226,6 +226,8 @@ @@ -226,6 +226,8 @@
226 background: resolve("activity/annual-account/4month.png") no-repeat; 226 background: resolve("activity/annual-account/4month.png") no-repeat;
227 background-size: contain; 227 background-size: contain;
228 margin: 0 auto; 228 margin: 0 auto;
  229 + position: relative;
  230 + z-index: 1;
229 } 231 }
230 232
231 &.purdah2-animation { 233 &.purdah2-animation {
@@ -243,6 +245,7 @@ @@ -243,6 +245,7 @@
243 width: 550px; 245 width: 550px;
244 height: 287px; 246 height: 287px;
245 overflow: hidden; 247 overflow: hidden;
  248 + display: none;
246 249
247 ul { 250 ul {
248 white-space: nowrap; 251 white-space: nowrap;
@@ -312,12 +315,14 @@ @@ -312,12 +315,14 @@
312 position: absolute; 315 position: absolute;
313 top: 483px; 316 top: 483px;
314 left: 25px; 317 left: 25px;
  318 + display: none;
315 } 319 }
316 } 320 }
317 321
318 .video-animation { 322 .video-animation {
319 transition: all 0.6s; 323 transition: all 0.6s;
320 top: 0; 324 top: 0;
  325 + opacity: 1;
321 z-index: 6; 326 z-index: 6;
322 } 327 }
323 328
@@ -342,7 +347,7 @@ @@ -342,7 +347,7 @@
342 } 347 }
343 348
344 .spokesman-animation { 349 .spokesman-animation {
345 - transition: all 0.5s; 350 + transition: all 0.4s;
346 width: 404px; 351 width: 404px;
347 height: 592px; 352 height: 592px;
348 transform: rotate(360deg) scale(1); 353 transform: rotate(360deg) scale(1);