jquery 菜单滚动动画

来源：互联网发布：同步带传动设计软件编辑：程序博客网时间：2024/06/14 11:04

网上代码有修改过

//jquery-1.5.1.min.js(function($){$.fn.extend({bgslide:function(value){//可选参数value = {"startf":88}value=$.extend({"fw":12,//--动画左右"sw":2,//--动画左右"ftime":200,//--动画时间"stime":400,//--动画时间"menuindex":0,//--悬停的位置"fnobj":this//--悬停的位置},value);//初始化背景的位置var liw = $("ul li:eq("+value.menuindex+")",value.menu).width();//获取第一个li的宽var $slide = $(this).children("div");var left = $("ul li:eq("+value.menuindex+")",value.menu).position().left;//获取当前li的横坐标value=$.extend(value,{"startf":left});//第一次悬停的位移$slide.css({"width":liw,"left":left});//悬停getClick($("ul li:eq("+value.menuindex+")",value.menu),this);//悬停时执行动画function hani(w,l){$slide.stop(true)//很关键的一句话，当悬停时，让正在执行的动画，和列队中的动画，都取消；防止鼠标不停滑动时的bug;  .animate({"width":w,"left":l+value.fw},value.ftime)  .animate({"left":l-value.fw},value.stime)  .animate({"left":l+value.sw},value.stime)  .animate({"left":l-value.sw},value.stime);}//离开时执行动画function oani(){$slide.stop(true)  .animate({"width":liw,"left":value.startf},value.ftime)  .animate({"left":value.startf-value.fw},value.stime)  .animate({"left":value.startf+value.sw},value.stime)  .animate({"left":value.startf-value.sw},value.stime);}$("ul li",this).hover(function(){getHover(this);var w = $(this).width();//获取当前li的宽var l = $(this).position().left;//获取当前li的横坐标if($(this).index()!=value.menuindex){//鼠标悬停在选中的li时，不发生动画hani(w,l);  }},function(){DelHover(this);oani();});$("ul li",this).click(function(){getClick(this,value.fnobj);var w = $(this).width();//获取当前li的宽var l = $(this).position().left;//获取当前li的横坐标var index =$(this).index();value=$.extend(value,{"startf":l,"menuindex":index});$slide.css({"width":w,"left":l});});}})})(jQuery);function getHover(obj){$(obj).find("span").addClass("icohoverorange");}function getClick(obj,fnobj){$(fnobj).find("span").removeClass("select");$(obj).find("span").addClass("select");}function DelHover(obj){$(obj).find("span").removeClass("icohoverorange");}

<div class="nav-box">      <ul>        <li><span class="home"></span><a href="#" >首页</a></li>        <li><span class="contact"></span><a href="#">客户管理</a></li>        <li><span class="folder"></span><a href="#">销售管理</a></li>        <li><span class="calendar"></span><a href="#">市场管理</a></li>        <li><span class="setting"></span><a href="#">维护管理</a></li>        <li><span class="briefcase"></span><a href="#">立案管理</a></li>        <li><span class="notepad"></span><a href="#">财务管理</a></li>        <li class="last"><span class="display"></span><a href="#" >系统设置</a></li>      </ul>      <div class="nav-line" ></div>    </div></div>

.nav-box { float:right; position:relative;}/*.nav-box ul { padding-top:8px;}*/.nav-box ul li { float:left; font-family:微软雅黑; font-size:14px; padding:0 2px; height:50px;text-align: center;max-width: 70px;display: block;/* line-height:50px; */}.nav-box ul li a { color:#4b4b4b; min-width:32px; display:inline-block;margin: 0px 5px;font-family: 微软雅黑;font-size: 14px;.nav-box ul li - 14pxbody - 12pxfont-style: normal;font-variant: normal;font-weight: normal;}.nav-box ul li a:hover { text-decoration:none;}.nav-box ul li.last { font-family:微软雅黑; font-size:12px; padding-top:1px;}.nav-box ul li.last a { color:#a2a2a1;}.nav-box .nav-line { position:absolute; left:0; bottom:0; height:2px; line-height:2px; font-size:0; width:52px; background:#35c4fd;}

0 0