老师，为什么我滑动滚动条时，

老师，为什么我滑动滚动条时，

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
    <header class="header">
        <div class="header__logo">H5实战页面</div>
        <div 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" id="btn">即课学习</a>
            <div class="header__nav-tip"></div>
        </div>
    </header>
    <!--第一屏-->
    <div class="screen-1">
        <div class="wrap">
            <h2 class="screen-1__heading screen-1__heading_animate_init">实战课程重磅上线</h2>
            <h3 class="screen-1__subheading screen-1__subheading_animate_init">一键云学习，还在等待什么？</h3>
        </div>
    </div>
    <!--第二屏-->
    <div class="screen-2">
        <div class="wrap">
            <h2 class="screen-2__heading">每门课都是真是商业案例</h2>
            <h3 class="screen-2__subheading">真实案例，真实场景，在实践中实践、操作、调试<br>大牛带你体验BAT真实开发流程，所有开发流程一一为你呈现</h3>
            <div class="screen-2-pic"></div>
            <div class="screen-2-pic-1"></div>
        </div>
    </div>
 
    <!--第三屏-->
    <div class="screen-3">
        <div class="wrap">
            <div class="screen-3-pic"></div>
            <h2 class="screen-3__heading">强大的语言课程体系支持</h2>
            <h3 class="screen-3__subheading ">学习环境与课程轻松对接，安装、调试、写入、部署、运行，一站式解决<br>,让你体验开发全流程</h3>
            <div class="screen-3-items">
                <div class="screen-3-item screen-3-item-html5">HTML5</div>
                <div class="screen-3-item screen-3-item-PHP">PHP</div>
                <div class="screen-3-item screen-3-item-JAVA">JAVA</div>
                <div class="screen-3-item screen-3-item-Python">Python</div>
                <div class="screen-3-item screen-3-item-Node-js">Node.js</div>
            </div>
        </div>
    </div>
    <!--第四屏-->
    <div class="screen-4">
        <div class="wrap">
            <h2 class="screen-4__heading">省去本地复杂的环境搭建</h2>
            <h3 class="screen-4__subheading">你可以告别在虚拟机中调试开发了</h3>
            <div class="screen-4__type">
                <div class="screen-4__type__item screen-4__type__item_i_1">
                    <div class="screen-4__word">实战课程集成开发环境</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__word">内置终端命令</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__word">编译你的应用程序</div>
                </div>
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__word">通过云端服务输出效果</div>
                </div>
            </div> 
        </div>
    </div>
    <!--第5屏-->
    <div class="screen-5">
        <div class="wrap">
            <h2 class="screen-5__heading">云端学习可以这样简单</h2>
            <h3 class="screen-5__subheading">看视频、敲代码，一气呵成，结合慕课网为你提供的云端学习工具，所见即所得，从此学习不一样</h3>
            <div class="screen-5-pic"></div>
        </div>
    </div>
    <!--第6屏-->
    <div class="screen-6">
        <div class="wrap">
            <div class="screen-6__button" id="screen-6__button">继续了解学习体验</div>
        </div>
    </div>
    <footer class="footer">
        <div class="daohang"> 网站首页  &nbsp;&nbsp;人才招聘&nbsp;&nbsp;    联系我们&nbsp;&nbsp;    高校联盟&nbsp;&nbsp;    关于我们&nbsp;&nbsp;    讲师招募&nbsp;&nbsp;    意见反馈&nbsp;&nbsp;    友情链接</div>
        <div class="banquan"> Copyrught © 2015 imooc.com All Rights REserved | 京ICP备 13046642号-2</div>
    </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 src="js/index.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
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
*{
    padding:0;
    margin:0;
}
a{
    text-decoration: none;
}
.wrap{
    width:1200px;
    margin:0 auto;
    height: auto;
}
/*头部区域*/
.header{
    width: 100%;
    height: 60px;
    position: relative;
    float: left;
    animation: headerAnimate 1s ease-in-out .5s;
}
.header__logo{
    width: 150px;
    height: 40px;
    line-height: 40px;
    background: url(../img/logo.png) no-repeat left center;
    background-size: 40px 40px ;
    text-indent: 50px;
    color:#fff;
    position: absolute;
    top:50%;
    margin-top:-20px;
    left:9px;
}
/*鼠标经过logo区的变化*/
.header__logo:hover{
    cursor: pointer;
}
.header__nav{
    position: absolute;
    right: 30px;
    height: 40px;
    position: absolute;
    top:50%;
    margin-top:-20px;
}
.header__nav-item{
    display: block;
    color: #fff;
    float: left;
    font-size: 14px;
    height: 40px;
    width:60px;
    text-align: center;
    line-height: 40px;
    padding-left: 40px;
    position: relative;
    text-align: center;
}
.header__nav-item:hover{
    color: red;
}
 
 
.header__nav-item_status_active{
    color:red;
}
.header__nav-item_status_active::after{
   /*  content: " ";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: red;
    left:0;
    bottom: 0; */
} 
.header__nav-item_custom_button{
    width: 96px;
    height: 40px;
    background: #f01400;
    color:#fff;
    border-radius: 5px;
    padding:0;
    margin-left: 40px;
}
 
/*滑动条*/
.header__nav-tip{
    position: absolute;
    width: 60px;
    height: 2px;
    background-color: rgb(240, 0, 0);
    bottom: 0;
    left: 0;
    margin-left: 40px;
    transition: all .5s;
}
 
/*第一屏*/
.screen-1{
    background: url(../img/sc1.jpg) no-repeat center;
    height: 640px;
    background-size: cover;
    padding-top:60px;
}
.screen-1__heading{
    color:#fff;
    padding-top:240px;
    text-align: center;
    font-size: 40px; 
}
.screen-1__subheading{
    color: #fff;
    font-weight: normal;
    text-align: center;
    font-size: 14px;
    padding-top:27px;
}
 
 
/*第二屏*/
.screen-2{
    height: 640px;
    background:url(../img/sc2.png) no-repeat bottom;
    position: relative;
}
.screen-2__heading{
    font-size: 40px;
    padding-top:90px;
    text-align: center;
}
.screen-2__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:167px;
    left: 50%;
    margin-left: -25px;
}
.screen-2__subheading{
    font-size: 14px;
    height: 14px; 
    text-align: center;
    padding-top: 64px;
}
.screen-2-pic{
    background: url(../img/sc2-1.png) no-repeat;
    width: 275px;
    height: 380px;
    position: absolute;
    left:50%;
    margin-left: -137.5px;
    top:260px;
    z-index: 2;
}
.screen-2-pic-1{
    width: 266px;
    height: 205px;
    background: url(../img/sc2-2.png) no-repeat;
    position: absolute;
    top:335px;
    left:50%;
    margin-left: -40px;
    z-index: 1;
    animation: plane 1s ease 3s ;
}
/*第三屏*/
.screen-3{
    height: 640px;
    background: #2b333b;
    position: relative;
}
.screen-3-pic{
    background: url(../img/sc3.png) no-repeat center center;
    background-size: 408px 440px;
    width:408px;
    height: 440px;
    position: absolute;
    top:50%;
    margin-top: -220px;
    margin-left: 20px;
}
.screen-3__heading{
    color: #fff;
    font-size: 35px;
    text-align: right;
    padding-top:230px; 
    padding-right: 125px;
}
.screen-3__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:300px;
    left: 50%;
    margin-left: 90px;
}
.screen-3__subheading{
    font-weight: normal;
    font-size: 16px;
    color:#fff;
    height: 16px;     
    line-height: 24px;
    padding-top:60px;
    padding-left: 685px;
}   
.screen-3-items{
    width:583px;
    height: 67px;
    margin-top:170px;
    margin-left:600px;
} 
.screen-3-item{
    float: left;
    width: 67px;
    height: 67px;
    line-height: 67px;
    text-align: center;
    font-size: 12px;
    margin-left: 38px;
    border-radius: 50%;
}
.screen-3-item-html5{
    border: 4px solid #1f5975;
    color: #02a4ce;
}
.screen-3-item-PHP{
    border: 4px solid #424d76;
    color: #7872b4;
}
.screen-3-item-JAVA{
    border: 4px solid #6b4146;
    color: #ff6060;
}
.screen-3-item-Python{
    border: 4px solid #29535f;
    color: #22abc1;
}
.screen-3-item-Node-js{
    border: 4px solid #3e4e40;
    color: #66b056;
}
/*第4屏*/
.screen-4{
    height: 640px;
    background-color: #f3f5f7;
    position: relative;
}
.screen-4__heading{
    color:#07111b;
    font-size: 40px;
    line-height: 40px;
    text-align: center;
    padding-top:90px;
}
.screen-4__subheading{
    color: #07111b;
    font-size: 14px;
    text-align: center;
    padding-top:64px;
}
.screen-4__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #f01400;
    position: absolute;
    top:167px;
    left: 50%;
    margin-left: -25px;
}
 
.screen-4__type{
    width: 1200px;
    height: 120px;
    position: absolute;
    top:290px;
    margin-left: 20px;
}
.screen-4__type__item{
    width: 160px;
    margin-right: 170px;
    height: 80px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
.screen-4__type__item_i_1{
    background: url(../img/sc4-1.png) no-repeat center top;
}
.screen-4__type__item_i_2{
    background: url(../img/sc4-2.png) no-repeat center top;
}
.screen-4__type__item_i_3{
    background: url(../img/sc4-3.png) no-repeat center top;
}
.screen-4__type__item_i_4{
    background: url(../img/sc4-4.png) no-repeat center top;
    margin-right: 0;
}
.screen-4__word{
    width: 100%;
    height: 14px;
    color:#2c3238;
    font-size: 14px;
    line-height: 14px;
    position: absolute;
    bottom: -30px;
    text-align: center;
}
 
 
/*第5屏*/
.screen-5{
    height: 640px;
    background: url(../img/sc5.jpg) no-repeat;
    background-size: cover;
    position: relative;
}
.screen-5-pic{
    width:200px;
    height: 200px;
    background: url(../img/sc5-1.png) no-repeat center center;
    position: absolute;
    top:102px;
    left:50%;
    margin-left: -100px;
}
.screen-5__heading{
    font-size: 35px;
    color: #fff;
    text-align: center;
    padding-top:365px;
}
.screen-5__heading::after{
    content: " ";
    display: block;
    width:50px;
    height: 2px;
    background: #fff;
    position: absolute;
    top:435px;
    left: 50%;
    margin-left: -25px;
}
.screen-5__subheading{
    color:#fff;
    padding-top:65px;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}
/*第6屏*/
.screen-6{
    height: 200px;
    background: #fff;
    position: relative;
}
.screen-6__button{
    width:240px;
    height: 60px;
    line-height: 60px;
    color:#14191e;
    text-align: center;
    border:2px solid #707070;
    border-radius: 2px;
    position: absolute;
    top:50%;
    margin-top:-30px;
    left:50%;
    margin-left:-120px;
    cursor: pointer;
    border-radius: 3px;
}
.screen-6__button:hover{
    color:red;
}
/*脚步*/
.footer{
    height:106px;
    background: #000;
    color:#c8cdd2;
    text-align: center;
     
}
.daohang{
    padding-top: 34px;
    font-size: 14px;
}
.banquan{
    font-size: 16px;
    color: #787d82;
    padding-top:15px;
}
 
/*固定导航栏样式*/
.header{
    transition: all 1s;
}
.header_status_back{
    position: fixed;
    background: rgba(255,255,255,.5);
    top:0;
    left: 0;
    z-index: 3;
}
.header_status_back .header__nav-item,
.header_status_back .header__logo
{
    color:#000;
}
.header_status_back .header__nav-item_custom_button{
    color: #fff;
}
.header_status_back .header__nav-item_status_active
{
    color:red;
}
 
.header_status_back .header__nav-item:hover{
    color: red;
}
 
@keyframes headerAnimate{
    0%{
        transform: translateY(-400px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}
 
@keyframes  plane{
    0%{
        transform: translateY(600px);
        opacity: 0;
    }
    25%{
        transform: translateY(-15px);
    }
    50%{
        transform: translateY(10px);
        opacity: 1;
    }
    75%{
        transform: translateY(-5px);
    }
    100%{
        transform: translateY(0px);
         
    }
}
 
/*大纲视图*/
.outline{
    position: fixed;
    bottom: 120px;
    right: 0;
    background: #fff;
    z-index: 3;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .3);
    padding: 5px 15px;
}
.outline__item{
    display: block;
    width: 50px;
    height: 40px;
    color: #aaa;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
    border-bottom: 1px solid #eee;
}
.outline__item:last-child{
    border-bottom: none;
}
.outline__item_status_active{
    color: red;
}
.outline{
    transition: all 1s;
    opacity: 0;
    transform: translate(100%,0);
}
.outline_status_in{
    opacity: 1;
    transform: translate(0,0);
}
 
.outline_status_in .outline__item:hover{
    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
/*第一屏动画*/
.screen-1__heading{
    transition: all 1s;
}
.screen-1__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-1__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-1__subheading{
    transition: all 1s .3s;
}
.screen-1__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-1__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
 
/*第二屏动画*/
.screen-2__heading{
    transition: all 1s;
}
.screen-2__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-2__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
 
.screen-2-pic{
    transition: all 1.5s .2s;
}
.screen-2__subheading{
    transition: all 1s .2s;
}
.screen-2__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-2__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-2-pic_animate_init{
    opacity: 0;
}
.screen-2-pic_animate_done{
    opacity: 1;
}
 
/*第3屏动画*/
.screen-3-pic{
    transition: all 1s;
}
.screen-3-pic_animate_init{
    transform: scale(0);
    opacity: 0;
}
.screen-3-pic_animate_done{
    transform: scale(1);
    opacity: 1;
}
.screen-3__heading{
    transition: all 1s;
}
.screen-3__heading_animate_init{
    transform: translate(0,30%);
    opacity: 0;
}
.screen-3__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-3__subheading{
    transition: all 1s .2s;
}
.screen-3__subheading_animate_init{
    transform: translate(0,100%);
    opacity: 0;
}
.screen-3__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-3-items{
     
    transition: all .5s 1.2s;
}
.screen-3-items_animate_init{
    transform: translate(0,200%);
}
.screen-3-items_animate_done{
    transform: translate(0,0);
}
.screen-3-item{
    animation: pulse 1s ;
}
 
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
/*第4屏*/
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    transform: translate(0,10%);
    opacity: 0;
}
.screen-4__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-4__subheading{
    transition: all 1s .2s;
}
.screen-4__subheading_animate_init{
    transform: translate(0,50%);
    opacity: 0;
}
.screen-4__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-4__type__item_i_1,
.screen-4__type__item_i_2,
.screen-4__type__item_i_3,
.screen-4__type__item_i_4
{
    transition: all .7s;
}
.screen-4__type__item_i_1_animate_init,
.screen-4__type__item_i_2_animate_init,
.screen-4__type__item_i_3_animate_init,
.screen-4__type__item_i_4_animate_init
{
    transform: scale(0);
}
 
.screen-4__type__item_i_1_animate_done,
.screen-4__type__item_i_2_animate_done,
.screen-4__type__item_i_3_animate_done,
.screen-4__type__item_i_4_animate_done
{
    transform: scale(1);
}
/*第5屏*/
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    transform: translate(0,5%);
    opacity: 0;
}
.screen-5__heading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-5__subheading{
    transition: all 1s .2s;
}
.screen-5__subheading_animate_init{
    transform: translate(0,50%);
    opacity: 0;
}
.screen-5__subheading_animate_done{
    transform: translate(0,0);
    opacity: 1;
}
.screen-5-pic{
    transition: all .5s;
}
.screen-5-pic_animate_init{
    transform: scale(0.3);
}
.screen-5-pic_animate_done{
    transform: scale(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
//获取元素
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);
    setCls(element,baseCls.split(cls).join(" ").replace(/\s+/g," "));
}
 
//第一步 初始化样式
var screenAnimateElements={
    ".screen-1":[
        ".screen-1__heading",
        ".screen-1__subheading",
    ],
    ".screen-2":[
        ".screen-2__heading",
        ".screen-2__subheading",
        ".screen-2-pic",
    ],
    ".screen-3":[
        ".screen-3-pic",
        ".screen-3__heading",
        ".screen-3__subheading",
        ".screen-3-items",
    ],
    ".screen-4":[
        ".screen-4__heading",
        ".screen-4__subheading",
        ".screen-4__type__item_i_1",
        ".screen-4__type__item_i_1",
        ".screen-4__type__item_i_2",
        ".screen-4__type__item_i_3",
        ".screen-4__type__item_i_4",
    ],
    ".screen-5":[
        ".screen-5__heading",
        ".screen-5__subheading",
        ".screen-5-pic",
    ]
}
 
function setScreenAnimateInit(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 basCls=element.getAttribute('class');//得到元素的类名
        element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_init");//重新设置类名
    }
}
//播放屏内的元素动画
function playScreenAnimateDone(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 basCls=element.getAttribute("class");
        element.setAttribute("class",basCls+" "+animateElements[i].substr(1)+"_animate_done");//重新设置类名
    }
}
 
window.onload=function(){
    for(k in screenAnimateElements){
        if(k===".screen-1"){
            continue;
        }
        setScreenAnimateInit(k);
    }
}
 
//第2步，滚动到哪里，就播放动画
window.onscroll=function(){
    var top=document.documentElement.scrollTop || document.body.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");
        switchNavItemsActive(0);
    }
    if(top>640*1-100){
        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);
    }
}
//第3步：点击跳转导航栏
var index=0;
var navitems=getAllElem(".header__nav-item");
for(var i=0;i<navitems.length;i++){
    navitems[i].setAttribute("data-id",i);
    navitems[i].onclick=function(){
        index=this.getAttribute("data-id");
        document.documentElement.scrollTop=index*640;
    }
}
//点击跳转，大纲
var outlineitems=getAllElem(".outline__item");
for(var i=0;i<outlineitems.length;i++){
    outlineitems[i].setAttribute("data-id",i);
    outlineitems[i].onclick=function(){
        index=this.getAttribute("data-id");
        document.documentElement.scrollTop=index*640;
    }
}
//鼠标放在按钮上，按钮的变化
var btn=document.getElementById("btn");
btn.onmousemove=function(){
    btn.style.backgroundColor="#c02c1f";
    btn.style.color="#fff";
}
btn.addEventListener("mouseout",function(){
    btn.style.backgroundColor="#f01400";
})
 
//导航大纲联动
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 m=0;m<outlineitems.length;m++){
        delCls(outlineitems[m],"outline__item_status_active");
    }
        addCls(outlineitems[idx],"outline__item_status_active");
}
//点击立即学习后跳到第一屏
    var btn1=document.getElementById("screen-6__button");
    btn1.onclick=function(){
        document.documentElement.scrollTop=0;
    }
 
    //第一屏动画延迟播放
    setTimeout(function(){
        playScreenAnimateDone(".screen-1");
    },200);
 
    //滑动条
    var activeIdx=0;
    //第4步：滑动门特效
    var navTip=getElem(".header__nav-tip");
    for(var i=0;i<navitems.length;i++){
            navitems[i].setAttribute("data-id",i);
            navitems[i].onmouseover=function(){
            var index=this.getAttribute("data-id");
            navTip.style.left=(index*100)+"px";
        }
        navitems[i].onmouseout=function(){
            var index=this.getAttribute("data-id");
            for(var n=0;n<navitems.length;n++){
                    if(getCls(navitems[n]).indexOf("header__nav-item_status_active")>-1){
                    activeIdx=n;
                    break;
                }
            }
            navTip.style.left=(activeIdx*100)+"px";
        }
    }

老师，为什么我滑动滚动条时，导航下面的条不跟着动，还有当我刷新页面但不滑动页面的时候header部分总是1s后才出现。。该怎么改呀
小仙女要好好学习 2019-08-14
源自：宣传页项目   5-6 作业题
2
收起

正在回答

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

2回答
好帮手慕慕子 回答被采纳获得+3积分 2019-08-14 19:22:51

同学你好， 

  1. 如果想要只在滚动条开始滚动的时候，执行headerAnimate这个动画， 可以参考如下思路

    （1）用一个单独的类设置动画样式

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

    （2）上一条设置的header一开始不显示的样式可以删除了

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

    （3）在滚动条开始滚动的时候， 给头部添加header_active这个类，执行动画效果

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

  2. 第一屏的字会先从上面飞出来， 主要浏览器对transition属性的解析有差异造成的。如果同学想调整这种情况。

    建议： 将screen-1__heading设置的过度属性修改为给screen-1__heading_animate_done这个类下添加过渡属性。

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

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

祝学习愉快~~~~

0
收起回答
好帮手慕慕子 2019-08-14 17:11:30

同学你好， 因为在滚动过程中， 没有设置导航下划线的left值跟随移动， 建议修改：

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

关于header这里， 同学的意思是，header一开始现实的， 1s后才消失然后在显示出来吗？如果是这样的话， 那么是因为一开始header是正常现实的， 延迟0.5s之后执行动画headerAnimate，让头部先应隐藏在显示

建议： 可以给header添加初始样式， 不让其显示

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

然后设置动画保持在结束状态， 让头部显示在页面中

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

如果不是指这里的话， 建议： 同学可以详细的描述一下，指的是哪里， 再次提问， 我们会继续为你解答的

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

祝学习愉快~~~

0
收起回答
  • 提问者 小仙女要好好学习 #1
    老师理解的对，但是我想实现的是刷新页面的时候header一直是显示的样子，一直都不变，只有在滑动滚动条的时候，才执行headerAnimate这个动画，
    2019-08-14 18:39:01
  • 提问者 小仙女要好好学习 #2
    老师，还有一个疑问就是，我用谷歌浏览器打开页面的时候第一屏的两行字会先从上面飞出来，然后才显示正常，用火狐打开就没事，是什么原因呢，？？？
    2019-08-14 18:49:39
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

关于滚动条更新
13 1 3
导航条设置多个对象时滑动条
30 0 4
想问一下滚动条
13 0 3
为什么我的ScrollView不能滚动
2 0 4
麻烦老师检查一哈，还有好像我的滚动条没显示出来？
3 0 4

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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