js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

jQuery实现页面滚动,菜单焦点自动切换的菜单导航特效

发布时间:2015-09-08 21:17:06    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery实现页面滚动,菜单焦点自动切换的菜单导航特效
$(function(){
    $(".ce > li > a").click(function(){
	     $(this).addClass("xz").parents().siblings().find("a").removeClass("xz");
	});

	$(window).scroll(function(){
		//设置变量top,表示当前滚动条到顶部的值
	    var top = $(window).scrollTop();   
        if (top > 70){
        	//当滚动条到顶部的值大于70时,添加类".ce2"到".ce"中
			$(".ce").addClass("ce2");
        }else{
        	//当滚动条到顶部的值小于等于70时,把".ce"中的类".ce2"删除
			$(".ce").removeClass("ce2");
		}
        
		var tt = $(window).height();    //设置变量tt,表示当前窗口高度的值
		var num =0;
		for(var n=0;n<7;n++)            
        {
			if(top >= n*tt && top <= (n+1)*tt)  //在此处通过判断滚动条到顶部的值和当前窗口高度的关系(当前窗口的n倍 <= top <= 当前窗口的n+1倍)来取得和导航索引值的对应关系
			{
				num=n;			  
			}
			$(".ce > li > a").removeClass("xz").eq(num).addClass("xz");     //先删除导航所有的选中状态,在通过上面判断中获得的导航索引值给当前导航加选中样式!
		}
	});

    $("#navon0").click(function(){
	   $("html,body").animate({scrollTop:$("#div0").offset().top},600);

	});
	$("#navon1").click(function(){
	   $("html,body").animate({scrollTop:$("#div1").offset().top},600);

	});
	$("#navon2").click(function(){
	   $("html,body").animate({scrollTop:$("#div2").offset().top},600);
	});
    $("#navon3").click(function(){
	  $("html,body").animate({scrollTop:$("#div3").offset().top},600);   
	});
	$("#navon4").click(function(){
	  $("html,body").animate({scrollTop:$("#div4").offset().top},600);   
	});
    $("#navon5").click(function(){
	  $("html,body").animate({scrollTop:$("#div5").offset().top},600);   
	});
	$("#navon6").click(function(){
	  $("html,body").animate({scrollTop:$("#div6").offset().top},600);   
	});
});



导航条 菜单导航

jquery.ScrollNav精美滑动菜单导航条特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

js特仿flash导航条鼠标悬停上下文字滑动特效

jquery实现网站注册动态步骤导航条特效

jquery实现导航条宽度随二级菜单宽度变化的特效代码

css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码

jQuery实现适合手机移动端应用的导航条菜单特效代码