做了个滑动菜单效果。
一开始没有考虑li里面内容多少的问题。直接给写死了。
现在问题来了。
不知道怎么解决。
高手帮帮忙。#menu_bar{widtH:700px;position:relative;height:30px;float:left;}
#menu_bar ul{height:30px;overflow:hidden; position:absolute;z-index:2;left:0px;top:0px;line-height:30px;}
#menu_bar li{float:left;text-align:center;font-size:14px;}
#menu_bar li a{color:#fff}
#menu_bar li a:hover{color:#FF3333;}
#menu_bar span{display:block;position:absolute;background:#fff;filter: alpha(Opacity=40);opacity: 0.4;-moz-opacity: 0.4;-khtml-opacity: 0.4;width:120px;z-index:1;height:30px;left:0px;top:0px;}JS。还有jquery库。(function($) {
$.fn.hoverIntent = function(f,g) {
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
var cX, cY, pX, pY;
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).unbind("mousemove",track);
ob.hoverIntent_s = 1;
return cfg.over.apply(ob,[ev]);
} else {
pX = cX; pY = cY;
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
}; var handleHover = function(e) {
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
if ( p == this ) { return false; }
var ev = jQuery.extend({},e);
var ob = this; if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } if (e.type == "mouseover") {
pX = ev.pageX; pY = ev.pageY;
$(ob).bind("mousemove",track);
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} } else {
$(ob).unbind("mousemove",track);
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
}; return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);让span宽度。随着li 里面内容的多少而改变。