• 基于jQuery的楼层案例


    ~(function() {
                var flag = true;
    
                //点击切换效果
                $(".oDR7_asideItem:not(:first)").click(function() {
                    flag = false;
                    //alert($(".oRD8_stairs").length);
                    $(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
                    $(this).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
                    var sTop = $(".oRD8_stairs").eq($(this).index()-1).offset().top - 165;
                    $("body,html").animate({
                        "scrollTop": sTop
                    }, 1000, function() {
                        flag = true;
                    });
                });
    
                //滚动条滚动效果
                $(window).scroll(function() {
                    if (flag) {
                        var sTop = $(document).scrollTop();
                        //alert($(".oRD8_stairs2").length);
                        var $floor = $(".oRD8_stairs2").filter(function(index, ele) {
                            return Math.abs($(this).offset().top - sTop) < $(this).height() / 2;
                        });
                        if($floor.index()-1 > 0) {
                            $(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
                            $(".oRD7_stairs2List").eq($floor.index()-1).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
                        }
                    }
                });
    
                //悬浮效果
                $(".oDR7_asideItem:not(:first)").hover(function() {
                    $(".oDR7_asideItem").removeClass("oDR7_active").find("span").removeClass("oDR7_activeDot").removeClass("oDR7_color");
                    $(this).addClass("oDR7_active").find("span:nth-of-type(2)").addClass("oDR7_activeDot").end().find("span:last-of-type").addClass("oDR7_color");
                },function() {});
            })();
  • 相关阅读:
    Java面试——VUE2&VUE3概览
    Golang 面试笔录
    数据科学完整流程概述
    周志华 机器学习 西瓜书 主要符号表
    数据分析师的发展方向?
    404 GET /nbextensions/jupyter-js-widgets/extension.js
    如何使用Conda源快速安装PyTorch?
    美化React组件之CSS Modules
    react如何全局配置sass
    nuxt api缓存,组件缓存,页面缓存
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7521479.html
Copyright © 2020-2023  润新知