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

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

发布时间:2015-09-02 15:50:29    您是第0位浏览者

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

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery仿2016年京东商城二级、三级左侧导航菜单筛选分类滑动特效代码效果,2016年京东菜单特效,模仿京东二级导航栏,京东左侧楼梯特效,京东二级筛选菜单实现,模仿京东的下拉菜单,京东分类导航栏代码,京东左侧悬浮导航js代码,jquery仿京东商城三级联动,jq仿京东的商品导航效果,商城左边导航点击样式,jquery大型购物网站分类导航特效代码,仿京东分类滑动特效,jquery 商城边导航条,仿京东商城左侧分类导航下拉菜单,京东商品分类代码

$('.all-sort-list > .item').hover(function(){    
				var eq = $('.all-sort-list > .item').index(this),				//获取当前滑过是第几个元素    
					h = $('.all-sort-list').offset().top,						//获取当前下拉菜单距离窗口多少像素    
					s = $(window).scrollTop(),									//获取游览器滚动了多少高度    
					i = $(this).offset().top,									//当前元素滑过距离窗口多少像素    
					item = $(this).children('.item-list').height(),				//下拉菜单子类内容容器的高度    
					sort = $('.all-sort-list').height();						//父类分类列表容器的高度    
				if ( item < sort ){												//如果子类的高度小于父类的高度    
					if ( eq == 0 ){    
						$(this).children('.item-list').css('top', (i-h));    
					} else {    
						$(this).children('.item-list').css('top', (i-h)+1);    
					}    
				} else {    
					if ( s > h ) {												//判断子类的显示位置,如果滚动的高度大于所有分类列表容器的高度    
						if ( i-s > 0 ){											//则 继续判断当前滑过容器的位置 是否有一半超出窗口一半在窗口内显示的Bug,    
							$(this).children('.item-list').css('top', (s-h)+2 );    
						} else {    
							$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );    
						}    
					} else {    
						$(this).children('.item-list').css('top', 3 );    
					}    
				}	
    
				$(this).addClass('hover');    
				$(this).children('.item-list').css('display','block');    
			},function(){    
				$(this).removeClass('hover');    
				$(this).children('.item-list').css('display','none');    
			});    
			$('.item > .item-list > .close').click(function(){    
				$(this).parent().parent().removeClass('hover');    
				$(this).parent().hide();    
			});



导航菜单 jquery京东导航菜单 左侧商品分类 商品分类

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

仿美图秀秀官网,纯CSS二级下拉导航菜单特效

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery仿腾讯云全屏下拉导航菜单特效代码

jquery实现顶部固定、二级栏目之间相互滑动的导航菜单特效

jquery仿海信官网带缩略图下拉导航菜单特效

jquery仿天猫左侧导航菜单分类列表

js实现竖直收缩导航菜单,点击展开折叠菜单特效

jquery导航菜单可拖动特效

jquery实现新闻门户网站二级导航菜单特效

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

jquery仿马可波罗左侧商品列表导航菜单特效

jquery仿京东商城左侧商品分类导航菜单样式特效_模仿京东二级导航栏_商品分类代码

jquery实现鼠标滚动的时候,导航菜单大小可自动调整的特效

kissy仿阿里云滑动下拉导航菜单特效

jQuery黑色竖直多级导航菜单特效

jquery实现左侧导航菜单滚动特效

jquery仿天猫分类导航通栏底部banner切换代码_jquery仿天猫商城左侧商品分类导航菜单样式特效_模仿天猫二级导航栏

jquery实现垂直多级导航菜单展开收缩特效

CSS实现导航菜单下拉特效代码

友荐云推荐
大家说 此评论不代表本站观点