仿淘宝商城左侧分类导航菜单效果（平滑，高效，智能定位，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);
    });
});

完毕！

作者：曾祥展

出处：学无止境-博客园（http://www.cnblogs.com/zengxiangzhan/）

仿淘宝商城左侧分类导航菜单效果（平滑，高效，智能定位，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

标签

淘宝商城

top

var