仿MSN小类别滑动效果

效果图  msn.rar

关键CSS代码

*{
margin:0;
position:0;
}

.main_l{
position:absolute;
top:300px;
left:300px;
}

.main_l .main_title {
width: 513px;
overflow: hidden;
}
.main_title {
height: 28px;
overflow: hidden;
background: url(http://stimgcn1.s-msn.com/portal/hp/2011/images/s3.png) 0 0 no-repeat;
float: left;
}


.tab .main_title ul.fx {
z-index: 20;
position: relative;
left:0px;
}

.main_title ul li{
list-style::none;
display:inline;
border-right:1px #FFFFFF solid;

padding:0 16px 0 16px;
font-size:12px;
}

.tab .main_title div.animate {
height: 23px;
position: absolute;
top: 0;
border-top: #009AD9 4px solid;
border-left: #009AD9 1px solid;
border-right: #009AD9 1px solid;
border-bottom: white 1px solid;
background-color: white;
}

关键HTML代码

<div class="main_title">
<ul class="fx">
<li>风尚
<li>时尚
<li>女性
<li>星座
</li></ul>
<div style="width: 60px; left: 35px" class="animate"></div>
</div>

</div>

关键js代码

$(function(){
var less=0;
	$(".fx li").mousemove(function(){

	 var ofset=$(this).offset();
	 var l=$(".animate").offset().left;
      less=ofset.left-l;

	 if(less>0){	
set();		
	 }else{
	 setless();
	 }
	});
	
	function set(){
	setTimeout(function(){
	if(less>0){
	 $(".animate").css("left",parseFloat($(".animate").css("left").replace("px",""))+1);
	  less=less-1;
	  set();
	}
	},20);

	}
	
	function setless(){

	setTimeout(function(){
	
	if(less<0){
	 $(".animate").css("left",parseFloat($(".animate").css("left").replace("px",""))-1);
	  less=less+1;
	  setless();
	}
	},20);

	}

});