仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)

∥☆過路亽.° 提交于 2020-01-22 16:12:26

仿淘宝商城   左侧分类导航菜单  效果平滑高效智能定位jquery版

仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)

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

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

完毕!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!