仿淘宝商城 左侧分类导航菜单 效果(平滑,高效,智能定位,jquery版)
jquery实现:
$(document).ready(function () { <!-- 鼠标进入--> var g = $(".pop-subcategory"); $('.items').delegate("li", "mouseenter", function () { $(".shadow").children().addClass("hidden"); var i = $("li").index(this); var s = $(".shadow").children().eq(i); s.removeClass("hidden"); $(this).addClass("selected"); $(".mallCategory").css("zIndex", 20); g.removeClass("hidden"); <!--智能定位--> var e = $(this); var z = 20, u = 0; var C = e.offset(), y = e.height(), v = $(".mallCategory").offset(), t = $(".pop-subcategory").height(), w = $(window).height(), q = $(window).scrollTop(), r = w - t - (C.top - q), x = Math.abs(C.top - q - v.top), B = w - (C.top - q), p = C.top - v.top; if (r <= 0) { r = Math.abs(r); if (B > y) { u = B - y; if (u > z) { p = p - r - z + 7; } else { p = p - r; } } else { p = p - r + z + B + 20; } } if (p < 0) { p = 0; } $(".pop-subcategory").css("top", p + "px"); $(".shadow").children().eq(i).find('.lst-subcategory dl:first').addClass("first"); g.live("mouseenter", function () { $('.items').children().removeClass("selected"); $('.items').children().eq(i).addClass("selected"); g.removeClass("hidden"); }); }); <!-- 鼠标移出后--> $('.pop-subcategory').delegate("div.J_SubViewItem", "mouseleave", function () { $(this).addClass("hidden"); g.addClass("hidden"); $('.items').children().removeClass("selected"); $(".mallCategory").css("zIndex", 15); }); $('.items').delegate("li.J_MenuItem", "mouseleave", function () { $(this).removeClass("selected"); g.addClass("hidden"); $(".mallCategory").css("zIndex", 15); }); });
完毕!
仿淘宝商城 左侧分类导航菜单 效果(平滑,高效,智能定位,jquery版)
jquery实现:
$(document).ready(function () { <!-- 鼠标进入--> var g = $(".pop-subcategory"); $('.items').delegate("li", "mouseenter", function () { $(".shadow").children().addClass("hidden"); var i = $("li").index(this); var s = $(".shadow").children().eq(i); s.removeClass("hidden"); $(this).addClass("selected"); $(".mallCategory").css("zIndex", 20); g.removeClass("hidden"); <!--智能定位--> var e = $(this); var z = 20, u = 0; var C = e.offset(), y = e.height(), v = $(".mallCategory").offset(), t = $(".pop-subcategory").height(), w = $(window).height(), q = $(window).scrollTop(), r = w - t - (C.top - q), x = Math.abs(C.top - q - v.top), B = w - (C.top - q), p = C.top - v.top; if (r <= 0) { r = Math.abs(r); if (B > y) { u = B - y; if (u > z) { p = p - r - z + 7; } else { p = p - r; } } else { p = p - r + z + B + 20; } } if (p < 0) { p = 0; } $(".pop-subcategory").css("top", p + "px"); $(".shadow").children().eq(i).find('.lst-subcategory dl:first').addClass("first"); g.live("mouseenter", function () { $('.items').children().removeClass("selected"); $('.items').children().eq(i).addClass("selected"); g.removeClass("hidden"); }); }); <!-- 鼠标移出后--> $('.pop-subcategory').delegate("div.J_SubViewItem", "mouseleave", function () { $(this).addClass("hidden"); g.addClass("hidden"); $('.items').children().removeClass("selected"); $(".mallCategory").css("zIndex", 15); }); $('.items').delegate("li.J_MenuItem", "mouseleave", function () { $(this).removeClass("selected"); g.addClass("hidden"); $(".mallCategory").css("zIndex", 15); }); });
完毕!
来源:https://www.cnblogs.com/qiuweiguo/archive/2011/09/01/2161720.html