页面顶部导航头部动态下拉交互 - 诸葛小觉

html:

1 <div class="topline">
2     <div class="avatarblank">
3         <div class="avatararea">
4             <a href="#"></a>
5             <div class="avatarword"></div>
6         </div>
7     </div>
8 </div>

css:

 1 *{margin:0;padding:0;}
 2 .topline{
 3     width:100%;
 4     height:50px;
 5     display:block;
 6     background:#dfdfdf;
 7     position:relative;
 8     z-index:3;
 9 }
10 .avatarblank{
11     width:200px;
12     height:50px;
13     display:block;
14     background:#ccc;
15     margin:0 auto;
16     position:relative;
17     z-index:4;
18 }
19 .avatarblank a {
20     width: 40px;
21     height: 40px;
22     display:block;
23     border-radius:50%;
24     background: url(http://ww2.sinaimg.cn/mw690/723dd72fjw1fabgifu5lsj20bm0bmq3g.jpg) no-repeat 50% 10%;
25     background-size: 130%;
26     position:absolute;
27     top:5px;
28     left:50%;
29     margin-left:-20px;
30     z-index:2;
31 }
32 .avatarblank .avatarword{
33     width:300px;
34     height:200px;
35     display:none;
36     background:#dadada;
37     border-radius: 0 0 8px 8px;
38     position:absolute;
39     top:50px;
40     left:50%;
41     margin-left:-150px;
42     z-index:1;
43 }

javascript:

 1 var oriAvaWidth = $('.avatararea a').width();
 2 var oriAvaHeight = $('.avatararea a').height();
 3 var actTime = 0;
 4 var actTimes = 0;
 5 var overCount = [];
 6 
 7 function actTimer() {
 8     if (actTime < 90) {
 9         actTime += 30;
10         console.log(actTime);
11     } else {
12         clearInterval(overCount[actTimes]);
13         showaw();
14         actTime = 0;
15         actTimes++;
16     }
17 }
18 
19 $('.avatararea a').mouseover(function() {
20     overCount[actTimes] = setInterval(actTimer, 30);
21 });
22 $('.avatararea a').mouseleave(function() {
23     clearInterval(overCount[actTimes]);
24     actTime = 0;
25     console.log(actTime);
26     actTimes++;
27 });
28 
29 function showaw() {
30     $('.avatararea a').animate({
31         'width': '120px',
32         'height': '120px',
33         'margin-left': '-60px'
34     }, 160);
35     $('.avatarword').slideDown(66);
36 }
37 $('.avatararea').mouseleave(function() {
38     $('.avatararea a').animate({
39         'width': '40px',
40         'height': '40px',
41         'margin-left': '-20px'
42     }, 100);
43     $('.avatarword').slideUp(66);
44 });

demo:

请使用手机"扫一扫"x

posted on 2017-04-12 14:39 诸葛小觉阅读(462) 评论(0) 收藏举报

刷新页面返回顶部