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>

 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 }

 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 });