使用jQuery实现导航条滑动块效果

html部分：

<div id="navMenu">     
 <ul> 
 <li class="active"><a href='http://www.yydmz.com'>幽幽首页</li>   
  
   <li><a href='http://www.yydmz.com/xgmm/' >性感美女</a></li>
   
   <li><a href='http://www.yydmz.com/qcmn/' >清纯美女</a></li>
   
   <li><a href='http://www.yydmz.com/swyh/' >美腿丝袜</a></li>
   
   <li><a href='http://www.yydmz.com/xgmt/' >性感模特</a></li>
   
   <li><a href='http://www.yydmz.com/mxxz/' >明星写真</a></li>
   
   <li><a href='http://www.yydmz.com/qpmn/' >旗袍美女</a></li>
   
   <li><a href='http://www.yydmz.com/rtys/' >日韩美女</a></li>
   
   <li><a href='http://www.yydmz.com/ylbg/' >动漫美女</a></li>
   
   </ul>
   <div class="hkdiv"><span></span></div>
  </div>

css部分：

</pre><h3><strong>jquery部分：</strong></h3><p><pre name="code" class="html">$.fn.navSlide=function(){
	 var $_navDiv=$(this),
	        $_navUl=$('ul',$_navDiv),
		    $_navLi=$('li',$_navUl),
			$_navhk=$('.hkdiv',$_navDiv),
			$_navhkspan=$('span',$_navhk),
			//获取滑块的初始坐标
	         cswz=$_navLi.index($_navDiv.find('ul li.active')),
			 $Ac_li=$_navLi.eq(cswz),
			 widthA=$Ac_li.width(),
			 leftA=$Ac_li.position().left;
			 //初始化滑块位置
			 $_navhkspan.css({width:widthA,left:leftA});
			//给滑块绑定hover事件
			$_navLi.hover(function(){
				 var index=$_navLi.index(this),
				        widthB=$_navLi.eq(index).width(),
				        leftB=$_navLi.eq(index).position().left;
				 $_navhkspan.stop().animate({width:widthB,left:leftB},200);
				},function(){$_navhkspan.stop().animate({width:widthA,left:leftA},200)});
	};
	//引用自定义函数
	$(function(){
		  $('#navMenu').navSlide();
		});