jQuery商城常用楼层定位菜单代码

jQuery商城常用楼层定位菜单代码-精品资源网
jQuery商城常用楼层定位菜单代码
此内容为免费资源,请登录后查看
0
免费资源

jQuery商城常用楼层定位菜单代码

jQuery楼层定位菜单代码是一款商城常用的点击侧边楼层或者鼠标滚轮滚动都能精确定位到页面对应的楼层位置的折叠式楼层菜单网页特效。

js代码

<script src=\"js/jquery.min.js\"></script>
<script>
$(function(){
	$(\"li:odd\").hide();//li的第偶数个隐藏
	$(\"#slider ul li.active\").next().show();//激活的li下面那条线显示

	$(window).scroll(function(){
		var winHeight = $(window).height();//浏览器可视窗口的高度
		var scrollHeight = $(window).scrollTop();//鼠标滚动的距离
		// if($(\"#header\").height()){   //判断侧边栏什么时候显示
			$(\"#content .section\").each(function(){
				if(winHeight+scrollHeight-$(this).offset().top>winHeight/2){
					$(\"#slider ul li\").removeClass(\"active\").prev(\".line\").hide();
					$(\"#slider ul li\").eq($(this).index()).addClass(\"active\").next(\".line\").show();
				}	
			})
		// }
	})
	$(\"#slider ul li\").click(function(){
		
		var current = $(\"#content .div\").eq($(this).index()).offset().top;
		$(\"html,body\").animate({
			\"scrollTop\":current
		},500);
		$(this).addClass(\"active\").siblings().removeClass(\"active\").siblings(\".line\").hide();
		$(this).eq($(this).index()).addClass(\"active\").next(\".line\").show();
	})
})
</script>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容