页头和第四屏动画有问题

页头和第四屏动画有问题

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5实战</title>
<link rel="stylesheet" type="text/css" href="./css/5-6项目base.css">
<link rel="stylesheet" type="text/css" href="./css/5-6项目index.css">
<link rel="stylesheet" type="text/css" href="./css/5-6项目animate.css">
</head>
<body>
<header class="header header_animate_init">
<div class="header_wrap">
<div class="header_logo">H5实战页面</div>
<nav class="header_nav">
<a href="javascript:;" class="header_nav-item header_nav-item_status_active">实战课程</a>
<a href="javascript:;" class="header_nav-item">商业案例</a>
<a href="javascript:;" class="header_nav-item">课程体系</a>
<a href="javascript:;" class="header_nav-item">集成环境</a>
<a href="javascript:;" class="header_nav-item">云端学习</a>
<a href="javascript:;" class="header_nav-item header_nav-item_custom_button">即刻学习</a>
<div class="header_nav-tip"></div>
    </nav>
</div>
 
</header>
<div class="screen-1">
<h2 class="screen-1_heading screen-1_heading_animate_init">实战课程重磅上线</h2>
<h3 class="screen-1_subheading screen-1_heading_animate_init">一键云学习，还在等待什么？</h3>
</div>
<div class="screen-2">
    <div class="screen-2_wrap">
<h2 class="screen-2_heading screen-2_heading_animate_init">每门课都是真实商业案例</h2>
<div class="screen-2_tip screen-2_tip_animate_init"></div>
<h3 class="screen-2_subheading screen-2_subheading_animate_init">真实案例,真实场景,在实战中实践、操作、调试</br>大牛带你体验BAT真实开发流程,所有开发过程一一为你呈现</h3>
<div class="screen-2_banner">
<div class="screen-2_banner1"></div>
<div class="screen-2_banner2"></div>
<div class="screen-2_banner3 screen-2_banner3_animate_init"></div>
</div>
    </div>
</div>
<div class="screen-3">
<div class="screen-3_wrap">
<h2 class="screen-3_heading screen-3_heading_animate_init">强大的语言课程体系支持</h2>
<div class="screen-3_tip screen-3_tip_animate_init"></div>
<div class="screen-3_banner screen-3_banner_animate_init"></div>
<h3 class="screen-3_subheading screen-3_subheading_animate_init">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br/>，让你体验开发全流程</h3>
<div class="screen-3_features">
<div class="screen-3_features_item screen-3_features_item_desc1">HTML5</div>
<div class="screen-3_features_item screen-3_features_item_desc2">PHP</div>
<div class="screen-3_features_item screen-3_features_item_desc3">JAVA</div>
<div class="screen-3_features_item screen-3_features_item_desc4">Python</div>
<div class="screen-3_features_item screen-3_features_item_desc5">Node.js</div>
</div>
</div>
 
</div>
<div class="screen-4">
<div class="screen-4_wrap">
<h2 class="screen-4_heading screen-4_heading_animate_init">省去本地复杂的环境搭建</h2>
<div class="screen-4_tip screen-4_tip_animate_init"></div>
<h3 class="screen-4_subheading screen-4_subheading_animate_init">你可以告别在虚拟机中调试开发了</h3>
<div class="screen-4_features screen-4_features_animate_init">
 
<div class="screen-4_features_item screen-4_features_item_desc1">实战课程集成开发环境</div>
 
<div class="screen-4_features_item screen-4_features_item_desc2">内置终端命令行</div>
 
 
<div class="screen-4_features_item screen-4_features_item_desc3">编译你的应用程序</div>
 
<div class="screen-4_features_item screen-4_features_item_desc4">通过云端服务输出效果</div>
</div>
 
</div>
</div>
</div>
<div class="screen-5">
<div class="screen-5_bg"></div>
<h2 class="screen-5_heading">云端学习可以这样简单</h2>
<div class="screen-5_tip"></div>
<h3 class="screen-5_subheading">看视频，敲代码，一气呵成。结合慕课网为你提供的云端学习工具，所见即所得。从此学习不一样。</h3>
</div>
<div class="screen-other">
<a class="screen-other_button" href="javascript:;">继续了解学习体验</a>
</div>
<footer class="footer">
<a href="javascript:;" class="footer-nav_item">网站首页</a>
<a href="javascript:;" class="footer-nav_item">人才招聘</a>
<a href="javascript:;" class="footer-nav_item">联系我们</a>
<a href="javascript:;" class="footer-nav_item">高校联盟</a>
<a href="javascript:;" class="footer-nav_item">关于我们</a>
<a href="javascript:;" class="footer-nav_item">讲师招募</a>
<a href="javascript:;" class="footer-nav_item">意见反馈</a>
<a href="javascript:;" class="footer-nav_item">友情链接</a>
<br/>
<span>Copyright &copy 2015 imooc.com All Rights Reserved |&nbsp京ICP备13046642号-2</span>
</footer>
<div class="outline">
<a href="javascript:;" class="outline_item outline_item_status_active">实</a>
<a href="javascript:;" class="outline_item">商</a>
<a href="javascript:;" class="outline_item">课</a>
<a href="javascript:;" class="outline_item">环</a>
<a href="javascript:;" class="outline_item">云</a>
</div>
<script type="text/javascript" src="js/5-6项目.js"></script>
</body>
</html>
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
/*BEM 设计模式
 
模块(没有前缀,多个单词用-连接)
元素(元素在模块之后,可以有多个层级,以_连接)
修饰(某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用_链接)
*/
 
.header{
    background:rgba(0,0,0, 0.05);
    position: fixed;
    top:0;
    width:100%;
    height:60px;
    z-index: 5;
}
.header_wrap{
    width:100%;
    height:60px;
    position: relative;
}
.header_logo{
    width: 150px;
    height: 60px;
    line-height: 60px;
    font-size:14px;
    font-weight: bold;
    color:#ffffff;      
    text-indent: 50px;
    background:url('../img/logo.png') left center no-repeat;
    margin-left: 11px;
    position: absolute;
}
.header_nav{
    position: absolute;
    right:30px;
    height:60px;
    top:50%;
    margin-top:-19px;
     
}
.header_nav-item{
    color:#ffffff;
    font-size:14px;
    display: block; /*a标签是行元素,转块元素可以设置行高*/
    /*width: 56px;*/
    height:38px;
    line-height: 38px;
    text-align: center;
    float: left;
    margin-left:38px;
    position: relative;
}
.header_nav-item:hover{
    color:#f01400;
}
/*.header_nav-item_status_active{
    color:#f01400;
}*/
 
.header_nav-item_custom_button{
    width:90px;
    background: #f01400;
    border-radius:3px;
    padding:0;
     
}
 
/*第一屏*/
.screen-1{
    height:640px;
    background:url("../img/sc1.jpg")no-repeat center;
    /*position: relative;*/
    overflow: hidden;
    background-size:cover;
     
}
.screen-1_heading{
    margin:0;
    padding:0;
    font-size:40px;
    color:#ffffff;
    font-weight: bold;
    text-align: center;
    padding-top:240px;
}
.screen-1_subheading{
    font-size:14px;
    font-weight: normal;
    color:#ffffff;
    text-align: center;
    margin-top:33px;
}
 
 
/*第二屏*/
.screen-2{
    background-color:#f3f5f7;
    height: 640px;
    position: relative;
    overflow: hidden;
     
}
 
.screen-2_wrap{
    width:1200px;
    height:640px;
    margin:0 auto; 
    position: relative;
}
 
.screen-2_heading{
    color:#07111b;
    margin:0;
    padding:0;
    font-size:40px;
    line-height: 40px;
    padding-top:90px;
    text-align: center;
}
 
.screen-2_tip{
    width:50px;
    border:2px solid #ff0000;
    margin:0 auto;
    margin-top:36px;
}
 
.screen-2_subheading{
    color:#07111b;
    font-size:14px;
    padding-top:23px;
    line-height: 24px;
    text-align: center;
 
}
.screen-2_banner{
    position:relative;
    width:750px;
    margin:0 auto;
     
}
 
.screen-2_banner1{
    width:750px;
    height:361px;
    background:url(../img/sc2.png) center center no-repeat ;
    background-size:contain;
    position:absolute;
    margin-top:40px;
    overflow: hidden;
    
}
 
.screen-2_banner2{
    height:380px;
    width:275px;
    background:url(../img/sc2-1.png) center center no-repeat ;
    position:absolute;
    margin-left:240px;
    margin-top:20px;
    overflow: hidden;
    z-index:2;
     
}
 
.screen-2_banner3{
    height:205px;
    width:266px;
    background:url(../img/sc2-2.png) center center no-repeat ;
    position:absolute;
    margin-left:350px;
    margin-top:100px;
    overflow: hidden;
    z-index: 1;
}
 
/*第三屏*/
.screen-3{
    background-color:#2b333b ;
    height: 640px;
    position: relative;
    overflow: hidden;
     
}
.screen-3_wrap{
    width:1200px;
    height:640px;
    margin:0 auto; 
    position: relative;
}
 
.screen-3_heading{
    font-size:35px;
    font-weight:bold;
    color:#ffffff;
    margin-left:636px;
    padding-top:228px;
  
}
.screen-3_tip{
    width:50px;
    margin-left:636px;
    border:2px solid #ff0000;
    margin-top:31px;
}
.screen-3_subheading{
    font-size:14px;
    font-weight:normal;
    color:#ffffff;
    text-align:left;
    margin-left:636px;
    margin-top:26px;
    line-height: 24px;
}
 
.screen-3_banner{
    position:absolute;
    padding-left:129px;
    top:50%;
    margin-top:-170px;
    width:308px;
    height:340px;
    background: url(../img/sc3.png) left center no-repeat;
}
.screen-3_features{
    width:550px;
    height:66px;
    font-size:12px;
    margin-top: 159px;
    position: absolute;
    bottom: 48px;
    margin-left:650px;
}
.screen-3_features_item{
    width: 66px;
    height: 66px;
    float: left;
    line-height: 66px;
    border-radius:50%;
    text-align: center;
    margin-right: 36px;
}
.screen-3_features_item_desc1{
    color:#1f5975;
    border: 4px solid #1f5975;
}
.screen-3_features_item_desc2{
    color:#424d76;
    border: 4px solid #424d76;
}
.screen-3_features_item_desc3{
    color:#6b4146;
    border: 4px solid #6b4146;
}
.screen-3_features_item_desc4{
    color:#29535f;
    border: 4px solid #29535f;
}
.screen-3_features_item_desc5{
    color:#3e4e40;
    border: 4px solid #3e4e40;
}
 
/*第四屏*/
.screen-4{
    background-color:#f3f5f7;
    height: 640px;
    position: relative;
    overflow: hidden;
     
}
.screen-4_wrap{
    width:1200px;
    height:640px;
    margin:0 auto; 
    position: relative;
}
.screen-4_heading{
    font-size:42px;
    font-weight:bold;
    color:#07111b;
    text-align: center;
    padding-top:90px;
  
}
.screen-4_tip{
    width:50px;
    margin:0 auto;
    border:2px solid #ff0000;
    margin-top:36px;
}
 
.screen-4_subheading{
    font-size:14px;
    font-weight:normal;
    color:#07111b;
    text-align: center;
    margin-top:24px;
    line-height: 14px;
}
.screen-4_features{
    width: 1060px;
    height:120px;
    margin:75px auto 0;
    font-size:14px;
    color:#07111b;
}
.screen-4_features_item{
    width:165px;
    padding-top: 120px;
    float: left;
    position: relative;
    margin:0 50px;
    text-align: center;
     
}
.screen-4_features_item_desc1{
    background: url(../img/sc4-1.png) no-repeat center center;
 
}
.screen-4_features_item_desc2{
    background: url(../img/sc4-2.png) no-repeat center center;
}
.screen-4_features_item_desc3{
    background: url(../img/sc4-3.png) no-repeat center center;
}
.screen-4_features_item_desc4{
    background: url(../img/sc4-4.png) no-repeat center center;
}
 
/*第五屏*/
.screen-5{
    height:640px;
    background:url('../img/sc5.jpg') no-repeat center;
    background-size: cover;
}
.screen-5_bg{
    width:200px;
    height:200px;
    background:url('../img/sc5-1.png') no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left:-100px;
    padding-top:100px;
    overflow: hidden;
}
.screen-5_heading{
    font-size:42px;
    font-weight:bold;
    color:#ffffff;
    text-align: center;
    padding-top:360px;
  
}
.screen-5_tip{
    width:50px;
    margin:0 auto;
    border:2px solid #ffffff;
    margin-top:36px;
}
 
.screen-5_subheading{
    font-size:14px;
    font-weight:normal;
    color:#ffffff;
    text-align: center;
    margin-top:24px;
    line-height: 14px;
}
/*第六屏*/
.screen-other{
    height:200px;
    text-align:center;
    line-height:200px;
     
}
.screen-other_button{
    color:#14191e;
    border:2px solid #707070;
    border-radius:5px;
    font-size: 18px;
    padding:20px 45px; 
    cursor: pointer;
}
/*页脚*/
.footer{
    height:105px;
    background:#000000;
    text-align:center;
    position: relative;
}
.footer-nav_item{
    color:#c8cdd2;
    display: inline-block;
    padding:30px 20px 10px;
  
}
.footer span{
    font-size:14px;
    color:#787d82;
}
.outline{
    position: fixed;
    right:0;
    bottom:150px;
    z-index:3;
    background:#ffffff;
    padding:2px 10px;
    box-shadow: 0px 4px 12px rgba(7, 17, 27, 0.1);
  
}
.outline_item{
    color:#000000;
    display:block;
    padding: 10px;
}
.outline_item_active{
    color:red;
}
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
/*菜单栏动画*/
.header {
    transition: all 1s;
}
.header_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.header_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
 
/*第一屏动画*/
.screen-1_heading{
    transition: all 1s ease-in-out .5s;
}
.screen-1_subheading{
    transition: all 1.5s ease-in-out 1s;
}
  
.screen-1_heading_animate_init{
    opacity: 0;
    transform: translate(0,30%);
}
.screen-1_subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
  
.screen-1_heading_animate_done,
.screen-1_subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
/*第二屏动画*/
.screen-2_heading,
.screen-2_tip
{
    transition: all 1.5s;
}
.screen-2_subheading{
    transition: all 1.5s .5s;
}
.screen-2_banner3{
    transition: all 1s;
}
  
.screen-2_heading_animate_init,
.screen-2_subheading_animate_init,
.screen-2_tip_animate_init
{
    opacity: 0;
    transform: translate(0,100%);
}
 
  
.screen-2_heading_animate_done,
.screen-2_subheading_animate_done,
.screen-2_tip_animate_done
{
    opacity: 1;
    transform: translate(0,0);
}
/*定义帧动画*/
@-webkit-keyframes shake2{
    0%{
     
        transform: translate(0,10%);
    }
    30%{
         
        transform: translate(0,-10%);
    }
    70%{
         
        transform: translate(0,10%);
    }
    100%{
         
        transform: translate(0,0);
    }
}
.screen-2_banner3{
    -webkit-animation:shake2 1s 1.5s;
}
 
/*第三屏动画*/
.screen-3_heading,
.screen-3_tip,
.screen-3_features,
.screen-3_banner{
    transition: all 1s;
}
.screen-3_subheading{
    transition: all 1s .5s;
}
.screen-3_heading_animate_init,
.screen-3_tip_animate_init,
.screen-3_subheading_animate_init{
    opacity: 0;
    transform: translate(0,30%);
}
.screen-3_heading_animate_done,
.screen-3_tip_animate_done,
.screen-3_subheading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
/*添加screen-3_features_banner_animate_init*/
.screen-3_banner_animate_init{
    opacity: 0;
    transform: scale(0.5);
}
/*添加screen-3_features_banner_animate_done*/
.screen-3_banner_animate_done{
    opacity: 1;
    transform: scale(1);
}
.screen-3_features_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-3_features_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
/*定义帧动画*/
@-webkit-keyframes shake3{
    0%{
        opacity: 0;
        transform: translate(0,-10px);
    }
    20%{
        opacity: 0;
        transform: translate(0,0px);
    }
    30%{
        opacity: 0.25;
        transform: translate(0,-20px);
    }
    40%{
        opacity: 0.25;
        transform: translate(0,0px);
    }
    50%{
        opacity: 0.5;
        transform: translate(0,-20px);
         
    }
    60%{
        opacity: 0.5;
        transform: translate(0,0);
        transform:scale(1);
    }
    70%{
        opacity: 0.75;
        transform: translate(0,-25px);
        transform:scale(0.99);
    }
    80%{
        opacity: 0.75;
        transform: translate(0,0px);
        transform:scale(1);
    }
    90%{
        opacity: 0.8;
        transform: translate(0,10px);
        transform:scale(0.98);
    }
    100%{
        opacity: 0.8;
        transform: translate(0,10px);
        transform:scale(1);
    }
 
}
/*使用帧动画*/
.screen-3_features_item{
    -webkit-animation:shake3 ease-out 2s;
}
 
/*第四屏动画*/
.screen-4_heading,
.screen-4_tip,
.screen-4_features{
    transition: all 1s;
}
.screen-4_subheading{
    transition: all 1s .5s;
}
.screen-4_heading_animate_init
{
    opacity: 0;
    transform: translate(0,10%);  
}
.screen-4_subheading_animate_init,
.screen-4_tip_animate_init
{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4_features_animate_init{
    opacity: 0;
    transform:scale3d(0.5,0.5,0.5);
}
.screen-4_heading_animate_done,
.screen-4_tip_animate_done,
.screen-4_subheading_animate_done
{
    opacity: 1;
    transform: translate(0,0);
}
.screen-4_features_animate_done{
    opacity: 1;
    transform:scale3d(1,1,1);
}
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
// alert("done");   测试js文件引用进来了
//获取元素
var getElem=function(selector)
{
    return document.querySelector(selector);
}
 
var getAllElem=function(selector)
{
    return document.querySelectorAll(selector);
}
//获取元素样式
var getCls=function(element)
{
    return element.getAttribute('class');
}
 
//设置元素样式
var setCls=function(element,cls)
{
    return element.setAttribute('class',cls);
}
 
//为元素添加样式
var addCls=function(element,cls)
{
    var baseCls=getCls(element);
    if(baseCls.indexOf(cls)===-1)
    {
        setCls(element,baseCls+' '+cls);
    }
}
//为元素删除样式
var delCls=function(element,cls)
{
    var baseCls=getCls(element);
    if(baseCls.indexOf(cls)!=-1){
        setCls(element,baseCls.split(cls).join(' ').replace(/\s+/g,' '));
    }
}
 
//第一步:初始化样式 init
var screenAnimateElements={
    '.header':[
        ".header_logo",
        ".header_nav",
    ],
    '.screen-1':[
        '.screen-1_heading',
        '.screen-1_subheading',
    ],
    '.screen-2':[
        '.screen-2_heading',
        '.screen-2_tip',
        '.screen-2_subheading',
        '.screen-2_banner3',
         
    ],
    '.screen-3':[
        '.screen-3_heading',
        '.screen-3_subheading',
        '.screen-3_tip',
        '.screen-3_features',
        '.screen-3_banner',
         
    ],
    '.screen-4':[
        '.screen-4_heading',
        '.screen-4_subheading',
        '.screen-4_tip',
        '.screen-4_features',
    ],
    '.screen-5':[
        '.screen-5_heading',
        '.screen-5_subheading',
        '.screen-5_bg',
    ]
};
 
//设置屏内元素为初始状态
    var setScreenAnimateInit=function(screenCls){
    var screen=document.querySelector(screenCls);//获取当前屏
    var animateElements=screenAnimateElements[screenCls]; //当前屏中需要设置动画的元素
    for(var i=0;i<animateElements.length;i++)
            {
                var element=document.querySelector(animateElements[i]);
                var baseCls=element.getAttribute('class');
                element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'_animate_init');                                     
            }
     
}
 
//设置播放屏内的元素动画
var playScreenAnimateDone=function(screenCls)
{
    var screen=document.querySelector(screenCls);//获取当前屏
    var animateElements=screenAnimateElements[screenCls]; //当前屏中需要设置动画的元素
    for(var i=0;i<animateElements.length;i++)
            {
                var element=document.querySelector(animateElements[i]);
                var baseCls=element.getAttribute("class");
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done')
                    );
            }
     
}
window.onload=function(){
    for(k in screenAnimateElements)
    {
        if(k==='.screen-1')
        {
            continue;
        }
        setScreenAnimateInit(k);
    }
}
 
//第二步,滚动到哪里,就播放到哪里
var navItems=getAllElem('.header_nav-item');
var outLineItems=getAllElem('.outline_item');
var switchNavItemsActive=function(idx)
{
    for(var i=0;i<navItems.length;i++)
    {
        delCls(navItems[i],'header_nav-item_status_active');
    }
    addCls(navItems[idx],'header_nav-item_status_active');
 
    for(var i=0;i<outLineItems.length;i++)
    {
        delCls(outLineItems[i],'outline_item_status_active');
    }
    addCls(outLineItems[idx],'outline_item_status_active');
}
 
switchNavItemsActive(0)
window.onscroll=function()
{
    var top=document.documentElement.scrollTop;
     
    if(top>60)
    {
        addCls(getElem('.header'),'header_status_back');
        addCls(getElem('.outline'),'outline_status_in');
 
    }
    else{
        delCls(getElem('.header'),'header_status_back');
        delCls(getElem('.outline'),'outline_status_in');
        switchNavItemsActive(0)
    }
    if(top>1)
    {
        playScreenAnimateDone('.screen-1');
 
    }
    if(top>640*1-200)
    {
        playScreenAnimateDone('.screen-2');
        switchNavItemsActive(1)
    }
    if(top>640*2-100)
    {
        playScreenAnimateDone('.screen-3');
        switchNavItemsActive(2)
    }
    if(top>640*3-100)
    {
        playScreenAnimateDone('.screen-4');
        switchNavItemsActive(3)
    }
    if(top>640*4-100)
    {
        playScreenAnimateDone('.screen-5');
        switchNavItemsActive(4)
    }
     
}
 
// 第三步双向定位
 
var setNavJump=function(i,lib)
{
    var item=lib[i];
    item.onclick=function()
    {
         
        document.documentElement.scrollTop=i*800;
    }
}
 
for(var i=0;i<navItems.length;i++)
{
    setNavJump(i,navItems);
}
for(var i=0;i<outLineItems.length;i++)
{
    setNavJump(i,outLineItems);
}
 
//第四步 滑动门特效
var navTip=getElem('.header_nav-tip');
var setTip=function(idx,lip)
{
    lip[idx].onmouseover=function()
    {
        navTip.style.left=(idx*70)+'px';
    }
    var activeIdx=0;
    lip[idx].onmouseout=function()
    {
        for(var i=0;i<lib.length;i++)
            if(getCls(lib[i]).indexOf('header_nav-item_status_active'))
                activeIdx=i;
                break;
    }
}
for(var i=0;i<navItems.length;i++)
{
    setTip(i,navItems);
}
 
//小优化,默认载入第一屏的动画
setTimeout(function(){playScreenAnimateDone('.screen-1'),200})

页头不出来,第四屏动画四个小图片出来方式跟效果不一样
慕言_7946275 2019-08-26
源自：宣传页项目   5-6 作业题
3
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕慕子 回答被采纳获得+3积分 2019-08-26 16:55:52

同学你好， 

  1. 因为可以不用写这个样式， 所以推荐删除。你这里通过给screen-4_features_animate_init给四个图片整体设置效果， 这里建议删除了， 使用老师提供的参考方式， 给四个图片单独设置动画效果

  2. 因为老师给同学提供修改建议， 是在同学的代码基础上，为了方便同学理解， 能少改动的就尽量改动少一点。所以通过修改css样式是最简单直接有效的方式实现效果

  3. 中间的空格表示后代选择器，选择screen-4_features_animate_init下的.screen-4_features_item元素

  4. 第三屏动画， 因为动画时间差的问题，导致可能出现同学说的这种情况， 建议：可以参考老师给同学的第四屏四个图片动画的实现的思路， 设置四个小圆的动画。 另， 这个四个小圆需要有呼吸灯的效果， 也就是一直放大缩小的效果哦。 参考如下代码修改：

    http://img1.sycdn.imooc.com//climg/5d639e4e0001d4dd07500740.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~


0
收起回答
好帮手慕慕子 2019-08-26 15:35:51

同学你好， 

  1. 页头由于设置了初始init类，导致没有出现， 建议修改：

    （1）可以不给头部添加init类名

    http://img1.sycdn.imooc.com//climg/5d6383ee0001702f13880480.jpg

    （2）通过设置动画帧实现头部的动画效果

    http://img1.sycdn.imooc.com//climg/5d63849f0001456807280727.jpg

    （3）建议优化： 导航项的下划线需要清除哦

  2. 可以给四个小图片设置缩小到放大的过渡效果

    http://img1.sycdn.imooc.com//climg/5d63880100016b9d08830875.jpg

如果帮助到了你， 欢迎采纳！

祝学习愉快~~~

0
收起回答
  • 提问者 慕言_7946275 #1
    为什么要删掉.screen-4_features_animate_init,留下screen-4_features_animate_done 然后.screen-4_features_animate_init .screen-4_features_item 为什么这么写,中间空格隔开什么意思老师,,, 不能在.screen-4_features_item四个图片共同设置个动画吗
    2019-08-26 16:21:13
  • 提问者 慕言_7946275 #2
    老师,第三屏动画四个圆的部分,滚动不播放,刷新才播放什么原因
    2019-08-26 16:41:45
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

拖动滚动条第一屏不显示是哪里的问题？
2 0 8
老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了
39 0 11
老师，帮我看下错在哪里了
1 0 11
我的搜索页在点击搜索框进入时没有动画效果，但是返回时有动画效果，如何解决
17 0 6
第一屏的active被多次加载
17 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码