zoukankan      html  css  js  c++  java
  • 基于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() {});
            })();
  • 相关阅读:
    11 改进版通过队列实现一个生产者消费者模型
    13 精进版SVIP版通过队列实现一个生产者消费者模型
    12 再次改进版通过队列实现一个生产者消费者模型
    31 进程
    join方法
    30 进程 线程
    进程传参方式和创建方式2
    设计模式 单例模式
    设计模式 抽象工厂模式
    设计模式 简单工厂模式
  • 原文地址:https://www.cnblogs.com/intelwisd/p/7521479.html
Copyright © 2011-2022 走看看