zoukankan      html  css  js  c++  java
  • 仿淘宝商城左侧分类导航菜单效果(平滑,高效,智能定位,jquery版)

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

    完毕!

  • 相关阅读:
    人 生 死 梦
    接口(三):
    接口(二):
    Mac下OpenCV开发环境配置(Terminal和Xcode)
    OcLint的使用
    分类Category的概念和使用流程
    @class
    内存管理
    点语法
    多态的概念和用法
  • 原文地址:https://www.cnblogs.com/zengxiangzhan/p/2155345.html
Copyright © 2011-2022 走看看