在jQuery中添加和删除类滚动一页

时间：2018-11-05 18:56:31

标签： javascript jquery html css

我想在用户滚动时添加和删除类.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_active div上添加.box类。我该怎么办，任何人都可以在这里帮助我。

1 个答案:

答案 0 :(得分：1)

您在此处使用的插件不不支持类似的功能，因为它只是转换了父元素的位置并更改了图像。

有关更多详细信息，请参见here。

我检查了可用的选项，但没有帮助，因此如果您在本地/项目目录中使用插件的代码而不是从CDN调用它，这是一种不可靠的方法无需入侵进入其核心代码的另一种方式。

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

将此行添加到180文件的第PageSwitch.js行，（对此有一个注释）

    // 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用于清除所有其他元素中的类名，然后将类名应用于活动元素。

也，使用默认元素并将其类设置为active，检查html代码段line 5，并进行注释。

我在.box_active类上进行了一些更改，只是为了使此处内容清楚，一旦您了解此处发生的情况，便可以将其删除。

立即以整页模式尝试该代码段：

(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>

相关问题
最新问题