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