Big Bug Ban

兴趣 践行 创新

Archive for the ‘jquery’ tag

jquery制作导航条

 

http://lab.haku.hk/code/js/navbar/

以前也做过这个..不过如果鼠标乱动就会出错..

新的jq1.4加了队列机制可以解决这个问题..

核心代码如下..

/隐藏二级菜单
$(".subnav").hide();
var mouseoutnum=[];
var mouseovernum=[];
	$("#nav .mainnav").each(function(index){
		
		$(this).hover(function(fn){
						clearTimeout(mouseoutnum[index]);
						//设定延时..关闭
						var _self = this;
						mouseovernum[index] = setTimeout(function() {
						jQuery(_self).find(".subnav").slideDown(200);
				}, 300);

			},function(fn){
						clearTimeout(mouseovernum[index]);
						//设定延时..关闭
						var _self = this;
						mouseoutnum[index] = setTimeout(function() {
						jQuery(_self).find(".subnav").hide();
				}, 300);
			});
		});

这个是从某大牛那里看到的解决方式-加入延时处理..

这也是种方式..

看效果之前请先把红色方块的挪开…

Written by princehaku

7月 8th, 2010 at 12:57 下午