老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了

老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了

代码顺序依次为：HTML、index.js、test.js、animate.css、index.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
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
<!DOCTYPE html>
<html>
<head>
    <title>个人网页</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="header__wrap">
            <div class="header__logo">慕课手机</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>
        </nav>
        </div>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <!-- 文字 -->
        <h2 class="screen-1__heading"><b>慕课手机</b>让你的生活更精彩</h2>
        <!-- 手机 -->
        <div class="screen-1__phone"></div>
        <!-- 阴影 -->
        <div class="screen-1__shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <!-- 文字 -->
        <h2 class="screen-2__heading">优美的设计，更令人着迷</h2>
        <h3 class="screen-2__subheading">采用最受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
        <!-- 手机 -->
        <div class="screen-2__phone">
            <div class="screen-2__point screen-2__point_i_1">高清摄像</div>
            <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_2">超薄机身</div>
            <div class="screen-2__point screen-2__point_custom_right screen-2__point_i_3">大屏显示</div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3__wrap">
            <!-- 文字 -->
            <h2 class="screen-3__heading">外形小巧，功能强大的手机</h2>
            <h3 class="screen-3__subheading">采用最受欢迎的设计，让它更加出色。<br/>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</h3>
            <!-- 手机 -->
            <div class="screen-3__phone"></div>
            <div class="screen-3__features">
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">5.7</div>
                    <div class="screen-3__features__item__desc">英寸大屏</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">1200</div>
                    <div class="screen-3__features__item__desc">万像素</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">3D</div>
                    <div class="screen-3__features__item__desc">touch</div>
                </div>
                <div class="screen-3__features__item">
                    <div class="screen-3__features__item__number">A9</div>
                    <div class="screen-3__features__item__desc">处理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4__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__type__item__color">慕课红</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_2">
                    <div class="screen-4__type__item__color">土豪金</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_3">
                    <div class="screen-4__type__item__color">太空灰</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
 
                <div class="screen-4__type__item screen-4__type__item_i_4">
                    <div class="screen-4__type__item__color">绅士黑</div>
                    <div class="screen-4__type__item__storage">16G/32G/64G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
            <!-- 文字 -->
            <h2 class="screen-5__heading">游戏、学习、拍照、有这一部就够了</h2>
            <h3 class="screen-5__subheading">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您的生活更丰富精彩</h3>
            <div class="screen-5__bg"></div>
    </div>
    <div class="screen-buy">
        <a class="screen-buy__button" href="javascript:;">立即购买</a>
    </div>
    <!-- 底部 -->
    <footer class="footer">
        © 2016 imooc.com   京ICP备13046642号
    </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./test.js"></script>
    <script type="text/javascript" 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
//获取元素
var getElem = function(selector){
    return document.querySelector(selector);
}
 
var getAllElem = function(selector){
    return document.querySelector(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,' '));
    }
}
// 页面载入完成后，所有动画元素设置_animate_init
// 第一步：初始化样式 init
var screenAnimateElements = {
    // 每屏动画
    '.screen-1' : [
        '.screen-1__heading',
        '.screen-1__phone',
        '.screen-1__shadow',
    ],
    '.screen-2' : [
        '.screen-2__heading',
        '.screen-2__subheading',
        '.screen-2__phone',
        '.screen-2__point_i_1',
        '.screen-2__point_i_2',
        '.screen-2__point_i_3',
    ],
    '.screen-3' : [
        '.screen-3__heading',
        '.screen-3__phone',
        '.screen-3__subheading',
        '.screen-3__features',
    ],
    '.screen-4' : [
        '.screen-4__heading',
        '.screen-4__subheading',
        '.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__bg',
    ],
};
// 把某个屏幕上有动画样式的都设为init
//设置屏内元素为初始状态
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(){
    console.log('onload');
    // 每一屏动画
    for(k in screenAnimateElements){
        setScreenAnimateInit(k);
    }
}
// 第二步：滚动到哪里，就播放到哪里
window.onscroll = function(){
    var top = document.body.scrollTop;
    console.log(top);
 
    // 滚动条大于800时要让第一屏播放
    if(top > 1){
        playScreenAnimateDone('.screen-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
// 将有动画效果的放一起
var screenAnimateElements = {
    // 每屏动画
    '.screen-1' : [
        '.screen-1__heading',
        '.screen-1__phone',
        '.screen-1__shadow',
    ],
    '.screen-2' : [
        '.screen-2__heading',
        '.screen-2__subheading',
        '.screen-2__phone',
        '.screen-2__point_i_1',
        '.screen-2__point_i_2',
        '.screen-2__point_i_3',
    ],
    '.screen-3' : [
        '.screen-3__heading',
        '.screen-3__phone',
        '.screen-3__subheading',
        '.screen-3__features',
    ],
    '.screen-4' : [
        '.screen-4__heading',
        '.screen-4__subheading',
        '.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__bg',
    ],
};
 
 
// 设置当前屏幕的样式
function setScreenAnimate(screenCls){
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//需要设置动画的元素
    //测试是否有初始化子元素的样式
    var isSetAnimateClass = false;
    //当前屏幕下所有子元素的状态是DONE？
    var isAnimateDone = false;
    screen.onclick = function(){
        // 初始化样式，增加init（A A_init）
        if( isSetAnimateClass === false){
            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');
            }
            isSetAnimateClass = true;
            return ;
        }
        //切换所有的 AnimateElements 的 init ——> done （A A_done）
        if( isAnimateDone === false){
            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'));
            }
            isAnimateDone = true;
            return ;
        }
        //切换所有的 AnimateElements 的 done ——> init （A A_init）
        if( isAnimateDone === true){
            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_done','_animate_init'));
            }
            isAnimateDone = false;
            return ;
        }
    }
}
// 每一屏动画
for(k in screenAnimateElements){
    setScreenAnimate(k);
}
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
/*第一屏文字内容*/
/*第一屏文字*/
.screen-1__shadow,
.screen-1__phone,
.screen-1__heading{
    transition: all 1s;
}
.screen-1__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-1__shadow_animate_done,
.screen-1__phone_animate_done,
.screen-1__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
/*第一屏手机*/
.screen-1__phone_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
/*第一屏手机阴影*/
.screen-1__shadow_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
 
/*第二屏动画*/
.screen-2__subheading,
.screen-2__phone,
.screen-2__heading{
    transition: all 1s;
}
.screen-2__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-2__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-2__phone_animate_init{
    opacity: 0;
    transform: translate(0,50%);
}
.screen-2__phone_animate_done,
.screen-2__subheading_animate_done,
.screen-2__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point{
    transition: all 1s 1s;
}
.screen-2__point_done{
    opacity: 1;
    transform: translate(0,0);
}
.screen-2__point_i_1_animate_init{
    opacity: 0;
    transform: translate(-100%,0);
}
.screen-2__point_i_3_animate_init,
.screen-2__point_i_2_animate_init{
    opacity: 0;
    transform: translate(100%,0);
}
/*第三屏动画*/
.screen-3__features,
.screen-3__subheading,
.screen-3__phone,
.screen-3__heading{
    transition: all 1s;
}
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;
    transform: translate(0,0);
}
 
.screen-3__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-3__phone_animate_init,
.screen-3__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-3__features_animate_init{
    opacity: 0;
    transform: scale(.5);
}
.screen-3__features_animate_done{
    opacity: 1;
    transform: scale(1);
}
.screen-3__features__item{
    transition: all .5s;
    cursor: pointer;
}
.screen-3__features__item:hover{
    transform: scale(1.1);
    border-color: #fff;
}
/*第四屏动画*/
.screen-4__subheading,
.screen-4__heading{
    transition: all 1s;
}
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-4__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
.screen-4__type__item_i_1{
    transition: all 1s .5s;
}
.screen-4__type__item_i_2{
    transition: all 1s 1s;
}
.screen-4__type__item_i_3{
    transition: all 1s 1.5s;
}
.screen-4__type__item_i_4{
    transition: all 1s 2s;
}
 
.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{
    opacity: 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{
    opacity: 1;
}
/*第五屏动画*/
.screen-5__bg,
.screen-5__subheading,
.screen-5__heading{
    transition: all 1s;
}
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-5__bg_animate_init,
.screen-5__subheading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
 
 
/*定义帧动画*/
@-webkit-keyframes bounce {
    0%,100% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
}
/*给第二屏的手机介绍使用帧动画*/
.screen-2__point:before,
.screen-2__point:after{
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 1px;
    left: 0px;
    background-color: rgba(255,0,0,0.4);
    border-radius: 50%;
    -webkit-animation: bounce 2s infinite;
}
 
.screen-2__point:before{
    -webkit-animation: bounce 2s infinite 1s;
}
.screen-2__point_i_1:after,
.screen-2__point_i_1:before{
    left: 200px;
}
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
/*
BEM设计模式
模块（没有前缀，多个单词用“-”连接）
元素（元素在模块之后，可以有多个层级，以__连接）
修饰（某元素、或某模块特别的状态，必须有一个状态名和状态值，使用_连接）
*/
/*头部*/
.header{
    background-color: #f7f7f7;
}
/*包含内容*/
.header__wrap{
    height: 80px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
}
/*logo*/
.header__logo{
    width: 100px;
    height: 38px;
    line-height: 38px;
    font-size: 20px;
    color: #07111b;
    padding-left: 50px;
    background:url('../img/logo.png') left center no-repeat;
    background-size: 38px 38px;
    position: absolute;
    top:50%;
    margin-top: -19px;
    left: 20px;
}
/*导航*/
.header__nav{
    position: absolute;
    right: 20px;
    height: 38px;
    top: 50%;
    margin-top: -19px;
}
/*导航内元素*/
.header__nav-item{
    color: #292f35;
    font-size: 14px;
    display: block;
    height: 38px;
    line-height: 38px;
    float: left;
    margin-left: 40px;
    position: relative;
}
/*鼠标移入导航文字变红*/
.header__nav-item:hover{
    color: #f01400;
}
/*状态与状态值*/
.header__nav-item_status_active{
    color: #f01400;
}
/*导航的下划线*/
.header__nav-item_status_active::after{
    content:' ';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    background-color: #f01400;
    left: 0;
    bottom: 0;
}
/*导航条上的按钮*/
.header__nav-item_custom_button{
    background: #000;
    color: #f4f4f5;
    text-align: center;
    width: 90px;
    border-radius: 3px;
}
/*第一屏*/
.screen-1{
    height: 800px;
    background-color: #e7e7e7;
    background:url(../img/bg-screen-1.png) no-repeat center;
    position: relative;
    overflow: hidden;
    background:url(../img/bg-screen-1.png) no-repeat center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*文字内容*/
.screen-1__heading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 46px;
    color: #4d555d;
    text-align: center;
    padding-top: 152px;
}
.screen-1__heading b{
    color: #f01400;
    font-weight: normal;
}
/*手机*/
.screen-1__phone{
    width: 1375px;
    height: 305px;
    background:url(../img/screen-1-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -687px;
    bottom: 180px;
    z-index: 2;
}
/*阴影*/
.screen-1__shadow{
    width: 1233px;
    height: 411px;
    background:url(../img/screen-1-shadow.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -616px;
    bottom: 30px;
    z-index: 1;
    opacity: .8;
}
/*第二屏*/
.screen-2{
    height: 800px;
    background-color: #fafafa;
    position: relative;
    overflow: hidden;
}
/*大标题*/
.screen-2__heading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 96px;
}
/*子标题*/
.screen-2__subheading{
    font-weight: normal;
    margin:0;
    padding: 0;
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
/*手机*/
.screen-2__phone{
    width: 928px;
    height: 873px;
    background:url(../img/screen-2-phone.png) no-repeat center;
    position: absolute;
    left: 50%;
    margin-left: -464px;
    bottom: -345px;
    z-index: 2;
}
/*手机描述*/
.screen-2__point{
    width: 108px;
    height: 22px;
    padding-right: 112px;
    font-size: 22px;
    line-height: 22px;
    color: #4d555d;
    position: absolute;
    background:url(../img/icon-point-right.png) no-repeat center right;
}
.screen-2__point_custom_right{
    padding:0 0 0 112px;
    background:url(../img/icon-point-left.png) no-repeat center left;
}
/*手机描述位置*/
.screen-2__point_i_1{
    top: 150px;
    left: -164px;
}
.screen-2__point_i_2{
    top: 30px;
    right: 130px;
}
.screen-2__point_i_3{
    top: 330px;
    right: 30px;
}
/*第三屏*/
.screen-3{
    height: 800px;
    background-color: red;
    position: relative;
    overflow: hidden;
    background:url(../img/bg-screen-3.png) no-repeat center;
    /*让背景图撑满整个屏*/
    background-size: cover;
}
/*第三屏容器*/
.screen-3__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*大标题*/
.screen-3__heading{
    font-size: 46px;
    line-height: 46px;
    color: #fff;
    text-align: left;
    padding-top: 94px;
}
/*子标题*/
.screen-3__subheading{
    font-size: 14px;
    color: #fff;
    text-align: left;
    padding-top: 25px;
    line-height: 28px;
}
/*手机*/
.screen-3__phone{
    width: 750px;
    height: 873px;
    background:url(../img/screen-3-phone.png) no-repeat center top;
    position: absolute;
    right: 0;
    top: 195px;
    z-index: 2;
}
/*左侧内容*/
.screen-3__features{
    position: absolute;
    top: 395px;
    left: 0;
    width: 320px;
    height: 280px;
}
.screen-3__features__item{
    width: 138px;
    height: 118px;
    border: 1px solid #cb7173;
    margin: 0 20px 20px 0;
    float: left;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}
.screen-3__features__item__number{
    height: 36px;
    font-size: 36px;
    line-height: 36px;
    padding: 28px 0 8px;
}
.screen-3__features__item__desc{
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}
/*第四屏*/
.screen-4{
    height: 800px;
    background-color: #fff;
    position: relative;
    overflow: hidden;
}
.screen-4__wrap{
    width: 1200px;
    height: auto;
    margin: 0 auto;
    position: relative;
}
/*大标题*/
.screen-4__heading{
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 135px;
}
/*子标题*/
.screen-4__subheading{
    font-size: 14px;
    color: #464a4f;
    text-align: center;
    padding-top: 29px;
    line-height: 28px;
}
/*手机型号*/
.screen-4__type{
    width: 1260px;
    height: 270px;
    position: absolute;
    top: 304px;
    margin-left: 30px;
}
/*单个手机*/
.screen-4__type__item{
    width: 220px;
    margin-right: 90px;
    height: 270px;
    float: left;
    position: relative;
    text-align: center;
    background-size: cover;
}
/*手机描述*/
.screen-4__type__item__color{
    width: 100%;
    height: 14px;
    line-height: 14px;
    font:14px;
    color: #2c3238;
    position: absolute;
    bottom: -44px;
}
.screen-4__type__item_i_1{
    background: url('../img/phone-1.png') no-repeat left top;
}
.screen-4__type__item_i_2{
    background: url('../img/phone-2.png') no-repeat left top;
}
.screen-4__type__item_i_3{
    background: url('../img/phone-3.png') no-repeat left top;
}
.screen-4__type__item_i_4{
    background: url('../img/phone-4.png') no-repeat left top;
}
.screen-4__type__item__storage{
    width: 100%;
    height: 12px;
    line-height: 12px;
    font:12px;
    color: #a4a9ae;
    position: absolute;
    bottom: -66px;
}
/*第五屏*/
.screen-5{
    height: 800px;
    position: relative;
    overflow: hidden;
    background-color: #d9dde1;
}
.screen-5__bg{
    width: 1920px;
    height: 433px;
    background:url(../img/bg-screen-5.png) no-repeat center;
    background-size: contain;
    position: absolute;
    left: 50%;
    margin-left: -960px;
    bottom: -100px;
}
/*大标题*/
.screen-5__heading{
    font-size: 46px;
    line-height: 46px;
    color: #f01400;
    text-align: center;
    padding-top: 130px;
}
/*子标题*/
.screen-5__subheading{
    font-size: 14px;
    color: #2c3137;
    text-align: center;
    padding-top: 25px;
    line-height: 28px;
}
 
/*第六屏*/
.screen-buy{
    height: 80px;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    background: #2b333b url('../img/bg-screen-buy.png') center no-repeat;
    text-align: center;
}
/*按钮*/
.screen-buy__button{
    height: 80px;
    width: 240px;
    text-align: center;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    background-color: #f01414;
    display: inline-block;
    border-radius: 3px;
    /*按钮的渐变效果*/
    transition: all .5s;
}
.screen-buy__button:hover{
    box-shadow: 0px 0px 10px #fff;
}
/*底部*/
.footer{
    height: 80px;
    line-height: 80px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    background-color: #07111b;
}
/*导航侧边栏*/
.outline{
    position: fixed;
    padding: 5px 10px;
    bottom: 120px;
    right: 0;
    z-index: 3;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,.5)
}
.outline__item{
    display: block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 5px 0;
    background-color: #fff;
    margin-top: 5px;
    border-top: 1px solid #eee;
    color: #93999f;
}
.outline__item:first-child{
    border: none;
}
.outline__item_status_active{
    color: red;
}
Redamancy_Y6 2020-02-27
源自：宣传页项目   5-3 JS实现交互动画(导航条)
39
收起

正在回答

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

5回答
好帮手慕粉 回答被采纳获得+3积分 2020-02-28 18:35:34

同学你好，第一屏本来就不需要加滚动效果的，它是页面刚打开的时候就需要执行的，修改参考：

1、手动给第一屏添加init状态：

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

2、在遍历各屏元素，给其初始化时，应该将第一屏去掉：

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

3、再手动给第一屏设置done状态：

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

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0
收起回答
  • Redamancy_Y6 提问者 #1
    老师，第一屏的动画出来了，但是手机动画方向不正确，应该是从上往下走的，现在变成了从下往上走了，我css动画那边好像没写错，这是什么原因？
    2020-02-28 19:19:39
  • Redamancy_Y6 提问者 #2
    老师，主要是现在我跟着老师讲的走的，然后我现在最主要的问题不是第一屏，是所有屏跟导航条，我觉得应该是我之前的代码有哪里写错了。麻烦老师回答一下这个问题https://class.imooc.com/course/qadetail/197440
    2020-02-28 19:27:00
好帮手慕粉 2020-02-29 09:23:17

同学你好，关于同学的问题回答如下：

1、老师这边测试的是正常的，手机是从上往下的：

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

同学可以再测试一下。

2、关于屏幕滚动问题，是兼容性导致的，同学处理下就好：

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

3、头部可以设置固定定位，固定在头部：

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

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0
收起回答
好帮手慕粉 2020-02-28 11:24:41

同学你好，test.js是老师用来测试的文件，实现的是点击事件，当我们点击某一屏时，某一屏就开始做动画。index.js实现的是当页面向下滚动时，页面做动画。

同学是引用路径错了啊：

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

js后面多写了一个点。

建议同学再认真听下老师讲的视频呢。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 Redamancy_Y6 #1
    老师，我把多余的“ . ”去掉了，但是还是不好使 <script type="text/javascript" src="js/test.js"></script> <script type="text/javascript" src="js/index.js"></script>
    2020-02-28 11:30:21
  • 提问者 Redamancy_Y6 #2
    老师，我已经卡住4个小时了，一直找不到原因，麻烦老师可以答复我一下
    2020-02-28 15:52:16
提问者 Redamancy_Y6 2020-02-28 11:22:28

老师，是我理解错了，我还以为是js文件多写了一个，现在改过来了，但是还是没有效果http://img1.sycdn.imooc.com//climg/5e5887690969b24e04810084.jpg

0
收起回答
好帮手慕粉 2020-02-28 10:45:40

同学你好，是同学在引入js代码的时候出错了：

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

另外，注释没有错误。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 Redamancy_Y6 #1
    是只有一个js是有用的吗？那为什么要写两个js？
    2020-02-28 11:14:38
  • 提问者 Redamancy_Y6 #2
    去掉test这个js吗？还是没有效果啊
    2020-02-28 11:16:54
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，帮我看下错在哪里了
1 0 11
JS怎么控制，滚动的时候是一屏一屏的
0 0 3
自己做了个练习题，怎么用JS实现自动滚动功能，没有任何思路麻烦老师帮忙看看，谢谢
47 0 6
麻烦老师看一下我的这个页面怎么下面有滚动条, 滚动条拉过去, 右边是空白的, 这是怎么回事呀?
6 0 2
界面无法滚动
0 0 6

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

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

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

了解课程

本课精华内容

问答 作业

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

16 1

请老师检查

65 3

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

26 3

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

18 1

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

188 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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