javascript - 在 jquery 一页滚动中添加和删除类

Question

我想在用户滚动时添加和删除类 .box_active。

在下面的 html 代码中，您可以看到 .box div。如果你检查这个 DEMO 您还可以看到完整的工作代码。

(function($) {
  var _prefix = (function(temp) {
    var aPrefix = ["webkit", "Moz", "o", "ms"],
      props = "";
    for (var i in aPrefix) {
      props = aPrefix[i] + "Transition";
      if (temp.style[props] !== undefined) {
        return "-" + aPrefix[i].toLowerCase() + "-";
      }
    }
    return false;
  })(document.createElement(PageSwitch));

  var PageSwitch = (function() {
    function PageSwitch(element, options) {
      this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
      this.element = element;
      this.init();
    }

    PageSwitch.prototype = {
      init: function() {
        var me = this;

        me.selectors = me.settings.selectors;
        me.selections = me.element.find(me.selectors.selections);
        me.selection = me.selections.find(me.selectors.selection);

        me.direction = me.settings.direction == "vertical" ? true : false;
        me.pagesCount = me.pagesCount();

        me.index =
          me.settings.index >= 0 && me.settings.index < me.pagesCount
            ? me.settings.index
            : 0;

        me.canScroll = true;

        if (!me.direction) {
          me._initLayout();
        }

        if (me.settings.pagination) {
          me._initPaging();
        }

        me._initEvent();
      },

      pagesCount: function() {
        return this.selection.length;
      },

      switchLenth: function() {
        return this.direction ? this.element.height() : this.element.width();
      },

      prev: function() {
        var me = this;
        if (me.index > 0) {
          me.index--;
        } else if (me.settings.loop) {
          me.index = me.pagesCount - 1;
        }
        me._scrollpage();
      },

      next: function() {
        var me = this;
        if (me.index < me.pagesCount) {
          me.index++;
        } else if (me.settings.loop) {
          me.index = 0;
        }
        me._scrollpage();
      },

      _initLayout: function() {
        var me = this;
        var width = me.pagesCount * 100 + "%",
          cellWidth = (100 / me.pagesCount).toFixed(2) + "%";

        me.selections.width(width);
        me.selection.width(cellWidth).css("float", "left");
      },

      _initPaging: function() {
        var me = this,
          pagesClass = me.selectors.page.substring(1);

        me.activeClass = me.selectors.active.substring(1);
        var pageHtml = "<ul class=" + pagesClass + " >";
        for (var i = 0; i < me.pagesCount; i++) {
          pageHtml += "<li></li>";
        }
        pageHtml += "</ul>";
        me.element.append(pageHtml);

        var pages = me.element.find(me.selectors.page);
        me.pageItem = pages.find("li");
        me.pageItem.eq(me.index).addClass(me.activeClass);

        if (me.direction) {
          pages.addClass("vertical");
        } else {
          pages.addClass("horizontal");
        }
      },

      _initEvent: function() {
        var me = this;
        me.element.on("click", me.selectors.page + " li", function() {
          me.index = $(this).index();
          me._scrollpage();
        });
        me.element.on("mousewheel DOMMouseScroll", function(e) {
          if (me.canScroll) {
            var detal = e.originalEvent.wheelDelta || -e.originalEvent.detail;

            if (
              detal > 0 &&
              ((me.index && !me.settings.loop) || me.settings.loop)
            ) {
              me.prev();
            } else if (
              detal < 0 &&
              ((me.index < me.pagesCount - 1 && !me.settings.loop) ||
                me.settings.loop)
            ) {
              me.next();
            }
          }
        });

        if (me.settings.keyboard) {
          $(window).on("keydown", function(e) {
            var keyCode = e.keyCode;

            if (keyCode == 37 || keyCode == 38) {
              me.prev();
            } else if (keyCode == 39 || keyCode == 40) {
              me.next();
            }
          });
        }

        $(window).resize(function() {
          var currentLength = me.switchLenth(),
            offset = me.settings.direction
              ? me.selection.eq(me.index).offset().top
              : me.selection.eq(me.index).offset().left;
          if (
            Math.abs(offset) > currentLength / 2 &&
            me.index < me.pagesCount - 1
          ) {
            me.index++;
          }
          if (me.index) {
            me._scrollpage();
          }
        });

        me.selections.on(
          "transitionend webkitTransitionEnd oTransitionEnd otransitionend",
          function() {
            me.canScroll = true;
            if (
              me.settings.callback &&
              $.type(me.settings.callback) == "function"
            ) {
              me.settings.callback();
            }
          }
        );
      },

      _scrollpage: function() {
        var me = this,
          dest = me.selection.eq(me.index).position();

        if (!dest) {
          return;
        }

        me.canScroll = false;

        if (_prefix) {
          me.selections.css(
            _prefix + "transition",
            "all " + me.settings.duration + "ms " + me.settings.easing
          );
          var translate = me.direction
            ? "translateY(-" + dest.top + "px)"
            : "translateX(-" + dest.left + "px)";
          me.selections.css(_prefix + "transform", translate);
        } else {
          var animateCss = me.direction
            ? { top: -dest.top }
            : { left: -dest.left };

          me.selections.animate(
            animateCss,
            me.settings.duration,
            "linear",
            function() {
              me.canScroll = true;
              if (
                me.settings.callback &&
                $.type(me.settings.callback) == "function"
              ) {
                me.settings.callback();
              }
            }
          );
        }

        if (me.settings.pagination) {
          me.pageItem
            .eq(me.index)
            .addClass(me.activeClass)
            .siblings("li")
            .removeClass(me.activeClass);
        }
      }
    };
    return PageSwitch;
  })();

  $.fn.PageSwitch = function(options) {
    return this.each(function() {
      var me = $(this),
        instance = me.data("PageSwitch");

      if (!instance) {
        instance = new PageSwitch(me, options);
        me.data("PageSwitch", instance);
      }
      if ($.type(options) === "string") {
        return instance[options]();
      }
    });
  };
  $.fn.PageSwitch.defaults = {
    selectors: {
      selections: ".selections",
      selection: ".selection",
      page: ".pages",
      active: ".active"
    },
    index: 0,

    easing: "ease",

    duration: "500",

    loop: false,

    pagination: true,

    keyboard: true,

    direction: "vertical",

    callback: ""
  };

  $(function() {
    $("[data-PageSwitch]").PageSwitch();
  });
})(jQuery);


$("#container").PageSwitch({
   duration:1000
});

* {
  padding: 0;
  margin: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

#container, .selections, .selection { height: 100%; }

.selection img {
  width: 100%;
  height: 100%;
}

#selection0,  #selection1,  #selection2,  #selection3,  #selection4 {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
  color: grey;
}

#selection0 { background-image: url(https://placeimg.com/1024/768/animals); }

#selection1 { background-image: url(https://placeimg.com/1024/768/arch); }

#selection2 { background-image: url(https://placeimg.com/1024/768/nature); }

#selection3 { background-image: url(https://placeimg.com/1024/768/tech); }

#selection4 { background-image: url(https://placeimg.com/1024/768/people); }

.left { float: left; }

h1 {
  font-size: 6em;
  font-weight: normal;
  transform: translateX(-100%);
}

p {
  font-size: 2em;
  margin: 0.5em 0 2em 0;
}

.intro {
  position: absolute;
  top: 50%;
 width: 100%  -webkit-transform:translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

#selection0 .title {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
  animation: sectitle0 1s ease-in-out 100ms forwards;
}

#selection0 p {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: sec0 1s ease-in-out 100ms forwards;
  animation: sec0 1s ease-in-out 100ms forwards;
}
 @-webkit-keyfarmes 
sectitle0 {  0% {
 -webkit-transform:translateX(-100%);
 transform:translateX(-100%);
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}
 @keyfarmes 
sectitle0 {  0% {
 -webkit-transform:translateX(-100%);
 transform:translateX(-100%);
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}
 @-webkit-keyfarmes 
sec0 {  0% {
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}
 @keyfarmes 
sec0 {  0% {
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
}
 100% {
 -webkit-transform:translateX(0);
 transform:translateX(0);
}
}

.slide {
  transform: translateX(0);
  transition: all ease-in-out 500ms;
}

.pages {
  position: fixed;
  list-style: none;
}

.vertical.pages {
  right: 10px;
  top: 50%;
}

.horizontal.pages {
  left: 50%;
  bottom: 10px;
}

.pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 10px 5px;
  cursor: pointer;
}

.horizontal.pages li {
  display: inline-block;
  vertical-align: middle;
}

.pages li.active {
  width: 14px;
  height: 14px;
  border: 2px solid #FFFE00;
  background: none;
  margin-left: 0;
}
.box {
  display:none;
}
.box_active {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-PageSwitch>
  <div class="selections" style="position:relative">
    <div class="selection" id="selection0">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection1">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection2">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection3">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection4">
      <div class="box"></div>
    </div>
  </div>
</div>

在演示页面中，当您向下滚动时，选择的 div 发生了变化。那时我想在事件选择后在 .box div 上添加 .box_active 类。我该怎么做，有人可以在这里帮助我。

Answer 1

您在这里使用的插件不支持任何类似的东西，因为它只是转换父元素的位置并更改图像。

有关这方面的更多详细信息，请参见 here .

我检查了可用的选项，但它没有帮助，所以如果你在本地/元素目录中使用插件代码而不是从 CDN 调用它，这是一个 hacky 方法，我看不到无需侵入其核心代码的另一种方法。

此操作在 PageSwitch.js 文件的 line: 177 附近的 _scrollpage 函数中处理。

在 PageSwitch.js 文件的 180 行添加这一行，(关于这些有注释)

    // custom changes start;
    // add these lines and use the classnames according to your need;
    me.selection.find('.box').removeClass('box_active');
    me.selection.eq(me.index).find('.box').addClass('box_active');
    // custom changes ends;

第一个 .removeClass 用于清除所有其他元素的类名，然后将类名应用于事件元素。

另外 使用默认元素并将其类设置为事件，检查html 片段第5 行，有注释。

我对 .box_active 类进行了一些更改，只是为了让这里的内容更清楚，一旦您理解了这里发生的事情，请随时删除它们。

现在在FullPage 模式 中尝试该代码段:

(function($) {
  var _prefix = (function(temp) {
    var aPrefix = ["webkit", "Moz", "o", "ms"],
      props = "";
    for (var i in aPrefix) {
      props = aPrefix[i] + "Transition";
      if (temp.style[props] !== undefined) {
        return "-" + aPrefix[i].toLowerCase() + "-";
      }
    }
    return false;
  })(document.createElement(PageSwitch));

  var PageSwitch = (function() {
    function PageSwitch(element, options) {
      this.settings = $.extend(true, $.fn.PageSwitch.defaults, options || {});
      this.element = element;
      this.init();
    }

    PageSwitch.prototype = {
      init: function() {
        var me = this;

        me.selectors = me.settings.selectors;
        me.selections = me.element.find(me.selectors.selections);
        me.selection = me.selections.find(me.selectors.selection);

        me.direction = me.settings.direction == "vertical" ? true : false;
        me.pagesCount = me.pagesCount();

        me.index =
          me.settings.index >= 0 && me.settings.index < me.pagesCount ?
          me.settings.index :
          0;

        me.canScroll = true;

        if (!me.direction) {
          me._initLayout();
        }

        if (me.settings.pagination) {
          me._initPaging();
        }

        me._initEvent();
      },

      pagesCount: function() {
        return this.selection.length;
      },

      switchLenth: function() {
        return this.direction ? this.element.height() : this.element.width();
      },

      prev: function() {
        var me = this;
        if (me.index > 0) {
          me.index--;
        } else if (me.settings.loop) {
          me.index = me.pagesCount - 1;
        }
        me._scrollpage();
      },

      next: function() {
        var me = this;
        if (me.index < me.pagesCount) {
          me.index++;
        } else if (me.settings.loop) {
          me.index = 0;
        }
        me._scrollpage();
      },

      _initLayout: function() {
        var me = this;
        var width = me.pagesCount * 100 + "%",
          cellWidth = (100 / me.pagesCount).toFixed(2) + "%";

        me.selections.width(width);
        me.selection.width(cellWidth).css("float", "left");
      },

      _initPaging: function() {
        var me = this,
          pagesClass = me.selectors.page.substring(1);

        me.activeClass = me.selectors.active.substring(1);
        var pageHtml = "<ul class=" + pagesClass + " >";
        for (var i = 0; i < me.pagesCount; i++) {
          pageHtml += "<li></li>";
        }
        pageHtml += "</ul>";
        me.element.append(pageHtml);

        var pages = me.element.find(me.selectors.page);
        me.pageItem = pages.find("li");
        me.pageItem.eq(me.index).addClass(me.activeClass);

        if (me.direction) {
          pages.addClass("vertical");
        } else {
          pages.addClass("horizontal");
        }
      },

      _initEvent: function() {
        var me = this;
        me.element.on("click", me.selectors.page + " li", function() {
          me.index = $(this).index();
          me._scrollpage();
        });
        me.element.on("mousewheel DOMMouseScroll", function(e) {
          if (me.canScroll) {
            var detal = e.originalEvent.wheelDelta || -e.originalEvent.detail;

            if (
              detal > 0 &&
              ((me.index && !me.settings.loop) || me.settings.loop)
            ) {
              me.prev();
            } else if (
              detal < 0 &&
              ((me.index < me.pagesCount - 1 && !me.settings.loop) ||
                me.settings.loop)
            ) {
              me.next();
            }
          }
        });

        if (me.settings.keyboard) {
          $(window).on("keydown", function(e) {
            var keyCode = e.keyCode;

            if (keyCode == 37 || keyCode == 38) {
              me.prev();
            } else if (keyCode == 39 || keyCode == 40) {
              me.next();
            }
          });
        }

        $(window).resize(function() {
          var currentLength = me.switchLenth(),
            offset = me.settings.direction ?
            me.selection.eq(me.index).offset().top :
            me.selection.eq(me.index).offset().left;
          if (
            Math.abs(offset) > currentLength / 2 &&
            me.index < me.pagesCount - 1
          ) {
            me.index++;
          }
          if (me.index) {
            me._scrollpage();
          }
        });

        me.selections.on(
          "transitionend webkitTransitionEnd oTransitionEnd otransitionend",
          function() {
            me.canScroll = true;
            if (
              me.settings.callback &&
              $.type(me.settings.callback) == "function"
            ) {
              me.settings.callback();
            }
          }
        );
      },

      _scrollpage: function() {
        var me = this,
          dest = me.selection.eq(me.index).position();
          // custom changes start;
          // add these lines and use the classnames according to your need;
        me.selection.find('.box').removeClass('box_active');
        me.selection.eq(me.index).find('.box').addClass('box_active');
        // custom changes ends;
        if (!dest) {
          return;
        }

        me.canScroll = false;

        if (_prefix) {
          me.selections.css(
            _prefix + "transition",
            "all " + me.settings.duration + "ms " + me.settings.easing
          );
          var translate = me.direction ?
            "translateY(-" + dest.top + "px)" :
            "translateX(-" + dest.left + "px)";
          me.selections.css(_prefix + "transform", translate);
        } else {
          var animateCss = me.direction ? {
            top: -dest.top
          } : {
            left: -dest.left
          };

          me.selections.animate(
            animateCss,
            me.settings.duration,
            "linear",
            function() {
              me.canScroll = true;
              if (
                me.settings.callback &&
                $.type(me.settings.callback) == "function"
              ) {
                me.settings.callback();
              }
            }
          );
        }

        if (me.settings.pagination) {
          me.pageItem
            .eq(me.index)
            .addClass(me.activeClass)
            .siblings("li")
            .removeClass(me.activeClass);
        }
      }
    };
    return PageSwitch;
  })();

  $.fn.PageSwitch = function(options) {
    return this.each(function() {
      var me = $(this),
        instance = me.data("PageSwitch");

      if (!instance) {
        instance = new PageSwitch(me, options);
        me.data("PageSwitch", instance);
      }
      if ($.type(options) === "string") {
        return instance[options]();
      }
    });
  };
  $.fn.PageSwitch.defaults = {
    selectors: {
      selections: ".selections",
      selection: ".selection",
      page: ".pages",
      active: ".active"
    },
    index: 0,

    easing: "ease",

    duration: "500",

    loop: false,

    pagination: true,

    keyboard: true,

    direction: "vertical",

    callback: ""
  };

  $(function() {
    $("[data-PageSwitch]").PageSwitch();
  });
})(jQuery);


$("#container").PageSwitch({
  duration: 1000
});

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

#container,
.selections,
.selection {
  height: 100%;
}

.selection img {
  width: 100%;
  height: 100%;
}

#selection0,
#selection1,
#selection2,
#selection3,
#selection4 {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
  text-align: center;
  color: grey;
}

#selection0 {
  background-image: url(https://placeimg.com/1024/768/animals);
}

#selection1 {
  background-image: url(https://placeimg.com/1024/768/arch);
}

#selection2 {
  background-image: url(https://placeimg.com/1024/768/nature);
}

#selection3 {
  background-image: url(https://placeimg.com/1024/768/tech);
}

#selection4 {
  background-image: url(https://placeimg.com/1024/768/people);
}

.left {
  float: left;
}

h1 {
  font-size: 6em;
  font-weight: normal;
  transform: translateX(-100%);
}

p {
  font-size: 2em;
  margin: 0.5em 0 2em 0;
}

.intro {
  position: absolute;
  top: 50%;
  width: 100% -webkit-transform:translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

#selection0 .title {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-animation: sectitle0 1s ease-in-out 100ms forwards;
  animation: sectitle0 1s ease-in-out 100ms forwards;
}

#selection0 p {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-animation: sec0 1s ease-in-out 100ms forwards;
  animation: sec0 1s ease-in-out 100ms forwards;
}

@-webkit-keyfarmes sectitle0 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyfarmes sectitle0 {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyfarmes sec0 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyfarmes sec0 {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slide {
  transform: translateX(0);
  transition: all ease-in-out 500ms;
}

.pages {
  position: fixed;
  list-style: none;
}

.vertical.pages {
  right: 10px;
  top: 50%;
}

.horizontal.pages {
  left: 50%;
  bottom: 10px;
}

.pages li {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  margin: 10px 5px;
  cursor: pointer;
}

.horizontal.pages li {
  display: inline-block;
  vertical-align: middle;
}

.pages li.active {
  width: 14px;
  height: 14px;
  border: 2px solid #FFFE00;
  background: none;
  margin-left: 0;
}

.box {
  display: none;
}

.box_active {
  display: block;
  /* feel free to remove, just for testing */
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-PageSwitch>
  <div class="selections" style="position:relative">
    <div class="selection" id="selection0">
      <div class="box box_active"></div> <!-- use default active class -->
    </div>
    <div class="selection" id="selection1">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection2">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection3">
      <div class="box"></div>
    </div>
    <div class="selection" id="selection4">
      <div class="box"></div>
    </div>
  </div>
</div>