<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } ul,li{ list-style:none; } a{ color:#333; text-decoration:none; } .clearfix{ zoom:1; } .clearfix:after{ content:"."; display:block; width:0; height:0; visibility:hidden; clear:both; } .menu{ position:relative; height:30px; line-height:30px; width:412px; margin:20px auto; background:#000; overflow:hidden; } .menu ul{ position:relative; } .menu li{ float:left; height:100%; } .menu li a{ display:block; padding:0 18px; color:#fff; font-size:14px; } .box{ height:100%; position:absolute; top:0; left:0; width:64px; background:deeppink; overflow:visible; -webkit-filter: blur(0px); } .box .left,.box .right{ width:0; height:100%; position:absolute; top:0; border-radius:50%; -webkit-border-radius:50%; } .box .left{ left:0; background:deeppink; } .box .right{ right:0; background:#000; } .box.active .left{ background: #000000; } .box.active .right{ background: deeppink; } </style> </head> <body> <div class="menu"> <div class="box"> <div class="left"></div> <div class="right"></div> </div> <ul class="clearfix"> <li ind="1"><a href="javascript:void(0);">首页</a></li> <li ind="2"><a href="javascript:void(0);">课程</a></li> <li ind="3"><a href="javascript:void(0);">视频</a></li> <li ind="4"><a href="javascript:void(0);">问答</a></li> <li ind="5"><a href="javascript:void(0);">会员</a></li> <li ind="6"><a href="javascript:void(0);">联系方式</a></li> </ul> </div> </body> <script src="../jquery-1.11.3.min.js"></script> <script> var lastIndex=0; $(".menu li").hover(function(){ var $this=$(this), $index=$this.index(), $width=$this.width(), num= 0,timer1,flag=$index; for(var i=0;i<$index;i++){ num+=$this.siblings().eq(i).width(); } var f=1; if(lastIndex>$index){//向左 f=-1; }else{//向右 f=1; } var i = Math.abs($index-lastIndex); lastIndex = $index; clearTimeout(timer1); timer1=window.setTimeout(function(){ $(".box").css({$width}).animate({left:num},100*i).delay(10); if(f>0){//向右 $(".box").addClass("active"); }else{ $(".box").removeClass("active"); } $(".left").animate({"30",left:"-15px"},100*i).animate({0,left:0},20); $(".right").animate({"30px",right:"-15px"},100*i).animate({0,right:0},20); },100); },function(){ }) </script> </html>
