jQuery京东分类导航菜单

     $('.all-sort-list > .item').hover(function(){var eq = $('.all-sort-list > .item').index(this),       //获取当前滑过是第几个元素h = $('.all-sort-list').offset().top,          //获取父菜单距离窗口多少像素 120pxs = $(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);} else {$(this).children('.item-list').css('top', (s-h)-(-(i-s))+2 );}} else {$(this).children('.item-list').css('top', 0 );}}  $(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天猫商品分类导航菜单一.HTML模块相关源码 HTML文件:index.html <!DOCTYPE html> <html><head><me ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
jQuery 分类导航菜单条点击变色
JQuery 分类导航菜单条点击变色,当点击导航菜单则当前点击选中导航菜单变色其它还原,依次类推. <script type="text/javascript" src=&q ...
jquery实现电商网站分类导航菜单
一.HTML部分 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=" ...
亚巴逊首页分类导航菜单触发区域控制原理窥视
对于大型电子商务网站,不论是平台型电商还是垂直型电商,由于商品品类丰富,入口繁多,为方便用户快速定位及查询,在首页一般会挂出一个分类导航的菜单.例如国内的天猫,京东,当当,凡客,苏宁易购...国外的A ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
php左测导航栏,商城左侧大分类导航菜单教程完整代码
提示:本页面右侧代码编辑器中的代码纯属展示调试代码本代码最终的效果请用下面的的完整代码,复制到本地运行完整代码html> 商城左侧大分类导航菜单 *{ margin:0; padding:0 ...
Axure教程（中级）：分类导航菜单高亮条的实现
下面这种分类导航菜单效果,大家都见过,接下来将讲解此实现效果.主要是运用[绝对位置]移动效果和函数[[this.x]].[[Target.y]]来实现. 一.页面布局从左侧拉入一个文本标签,文本为[ ...
jq ajax写二级导航,jQuery实现二级导航菜单的示例
实用JQ实现导航二级菜单效果,导航菜单在网站中非常常见,有的网站可能会出现三级菜单及多级菜单模式,下面我们来简单的实现一个二级菜单的效果. 部分效果截图: 整体代码: 导航菜单案例 *{ paddin ...
jquery京东新版左侧下拉分类导航菜单代码
下载地址 $(".all-sort-list >.item").hover(function () { var eq = $(".all-sort-list > ...

jQuery京东分类导航菜单

jQuery京东分类导航菜单相关推荐

最新文章

热门文章