下拉菜单卡顿

下拉菜单卡顿

代码如下:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style/style.css">
<script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
</head>
<body>
<header>
<nav class="insteadnav">
IMOOC<a class="button">▼</a>
</nav>
<div class="navbox">
<a class="nav" href="#">前端</a>
<a class="nav" href="#">Java</a>
<a class="nav" href="#">iOS</a>
<a class="nav" href="#">Android</a>
<a class="nav" href="#">PHP</a>
</div>
</header>
<section class="sec1">
<img src="./img/1.png">
<p>IMOOC</p>
<input type="button" value="START">
</section>
<section class="sec2">
<p>关于慕课网</p>
<p>关于课程</p>
<p>核心团队</p>
<p>新增专题</p>
</section>
<section class="sec3">
<article>
<p>响应式</p>
<p>響應式網頁設計(英语:Responsive web design,通常縮寫为RWD),或稱自适应网页设计、回應式網頁設計、對應式網頁設計。 是一种网页设计的技術做法,该设计可使网站在不同的設備(从桌面电脑显示器到移动电话或其他流動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,减少使用者進行缩放、平移和滚动等操作行為。</p>
</article>
</section>
<section class="sec4">
<p>IMOOC</p>
<p>Welcome to <span>www.imooc.com</span></p>
</section>
<section class="sec5">
<p>主打课程</p>
<div class="piccontainer">
<img src="./img/1.jpg">
<img src="./img/2.jpg">
<img src="./img/3.jpg">
<img src="./img/4.jpg">
<img src="./img/5.jpg">
<img src="./img/6.jpg">
</div>
</section>
<section class="sec6">
<p>Copyright &copy;2017&nbsp;imooc.com&nbsp;All&nbsp;Rights&nbsp;Reserved</p>
</section>
 
<script src="./js/js.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
* {
    margin0;
    padding0;
    text-decorationnone;
    list-stylenone;
}
 
header {
    display: flex;
    justify-contentcenter;
    align-items: center;
    align-self: center;
    background-color#B2C5CC;
    height: .3rem;
    font-size: .1rem;
}
 
header > .insteadnav {
    displaynone;
}
 
header a {
    width: .5rem;
    color#757575;
    text-aligncenter;
    font-size: .1rem;
    padding10px 0;
}
 
header > a:not(:first-child):hover {
    color#afafaf;
    background-colorrgb(255255255);
    transition: color 1s;
    transition: background-color 1s;
}
 
.sec1 {
    width100%;
    height2.5rem;
    background-color#B2C5CC;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .1rem;
}
 
.sec1 img {
    width: .5rem;
    height: .5rem;
    margin-bottom40px;
    margin-top30px;
}
 
.sec1 p {
    colorwhite;
    font-size: .14rem;
    margin-bottom40px;
}
 
.sec1 input {
    font-size: .15rem;
    background-colorwhite;
    padding10px 20px;
    color#757575;
    bordernone;
    transition: color 1s;
}
 
.sec1 input:hover {
    cursorpointer;
    color#afafaf;
    transition: color 1s;
}
 
.sec2 {
    display: flex;
    height: .6rem;
    border-bottom2px solid rgba(200200200, .6);
    justify-content: space-around;
    align-items: center;
    font-size: .1rem;
}
 
.sec2 p {
    width20%;
    text-aligncenter;
    color#bababa;
    transition: color 1s;
}
 
.sec2 p:hover {
    color#545454;
    transition: color 1s;
}
 
.sec3 article {
    display: flex;
    width100%;
    height3.5rem;
    flex-direction: column;
    justify-contentcenter;
    align-items: center;
}
 
.sec3 article p {
    width45%;
}
 
.sec3 article p:nth-child(1) {
    font-size: .2rem;
    font-weightbold;
    text-aligncenter;
    height40px;
    margin-bottom: .2rem;
}
 
.sec3 article p:nth-child(2) {
    font-size: .1rem;
    text-alignjustify;
    line-height2em;
}
 
.sec4 {
    height100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color#aaa;
    background-color#f4f4f4;
    padding0px 80px;
    font-size: .1rem;
}
 
.sec4 p:nth-child(1) {
    font-size: .2rem;
}
 
.sec4 p:nth-child(2) span {
    colorblack;
    font-size: .1rem;
}
 
.sec5 {
    width100%;
    height800px;
    backgroundurl("../img/bg.jpg"no-repeat 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: .1rem;
}
 
.sec5 p {
    margin-top50px;
    margin-left80px;
    font-size: .15rem;
}
 
.sec5 .piccontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
}
 
.sec5 .piccontainer img {
    width25%;
    height270px;
    margin20px;
    transition: all .4s;
}
 
.sec5 .piccontainer img:hover {
    cursorpointer;
    transform: scale(1.2);
}
 
.sec6 {
    height80px;
    line-height80px;
    font-size: .1rem;
    background-color#eee;
    text-aligncenter;
}
 
@media screen and (max-width400px) {
    header {
        display: flex;
        flex-direction: column;
        height1.3rem;
        z-index2;
        justify-content: flex-start;
    }
    header>.insteadnav {
        displayblock;
        width100%;
        text-aligncenter;
        font-size: .18rem;
        line-height: .26rem;
        padding: .05rem 0;
        z-index2;
        background-color#7EA6B1;
        colorwhite;
    }
    header>.insteadnav>.button {
        positionabsolute;
        top: -.05rem;
        right: .2rem;
        z-index2;
    }
    header .navbox{
        displaynone;
        positionrelative;
        z-index888;
        width100%;
    }
    header .nav {
        displayblock;
        width100%;
        background-color#7EA6B1;
        /*z-index: 2;*/
        border-bottom1px solid rgba(200200200, .5)
    }
    .sec4 {
        display: flex;
        flex-direction: column;
        justify-contentcenter;
    }
    .sec5 {
        width100%;
        height4rem;
        padding-bottom: .2rem;
    }
    .sec5 p {
        margin-left: .16rem;
        font-size: .15rem;
    }
    .sec5 .piccontainer img {
        width40%;
        height1rem;
        margin: .04rem;
    }
}
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
$(document).ready(function() {
    (function(win, doc) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' "resize",
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth <= 400) {
                    docEl.style.fontSize = '100px';
                else {
                    docEl.style.fontSize = 100 * (clientWidth / 400) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        recalc();
    })(window, document)
 
    $(".button").click(function(){
        $(".navbox").animate({
            'height''toggle',
        });
    })
 
});

按照老师的作业点评修改后,iphone6分辨率下浏览,下拉菜单仍然卡顿?

正在回答 回答被采纳积分+1

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

2回答
卡布琦诺 2018-05-08 12:08:25

如果你想跟视频中写的一模一样,你的布局是需要调整的

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

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

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

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

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

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

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

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

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

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

卡布琦诺 2018-05-07 18:58:54

这不是卡顿,是渐显渐隐的一种效果,如果你不想要这种效果,建议修改如下:

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

希望可以帮到你~

  • 提问者 RogerLeung #1
    你没明白我的意思。我是说这个下拉不顺畅啊,下拉菜单到达中间位置然后瞬间到底了。不是视频里演示的顺畅的滑动
    2018-05-07 20:11:10
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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