javascript - 仅当该部分出现在浏览器 View 中时，jQuery 才计入目标数字

标签 javascript jquery html css jquery-plugins

在 this website ，如果您向下滚动到“奖牌部分”

pic for help

刷新页面，您将看到数字滚动并停在目标处。

现在的问题是，我们是否可以仅当奖牌部分出现在浏览器 View 中时才滚动数字。

发生的情况是，当用户加载网站时，数字完美滚动，但它们发生在后台。用户当他/她向下滚动到奖章部分时，该效果将不可见，因为此时它已经结束，他需要刷新页面才能看到效果。

社区中的一个人建议了这个 jQuery Plugin 。我尝试在 JavaScript 中使用该插件(请遵循 fiddle 或代码的 JavaScript 部分中的注释)

涉及代码:

(function($) {
  $.fn.countTo = function(options) {
    options = options || {};

    return $(this).each(function() {
      // set options for current element
      var settings = $.extend({}, $.fn.countTo.defaults, {
        from: $(this).data('from'),
        to: $(this).data('to'),
        speed: $(this).data('speed'),
        refreshInterval: $(this).data('refresh-interval'),
        decimals: $(this).data('decimals')
      }, options);

      // how many times to update the value, and how much to increment the value on each update
      var loops = Math.ceil(settings.speed / settings.refreshInterval),
        increment = (settings.to - settings.from) / loops;

      // references & variables that will change with each update
      var self = this,
        $self = $(this),
        loopCount = 0,
        value = settings.from,
        data = $self.data('countTo') || {};

      $self.data('countTo', data);

      // if an existing interval can be found, clear it first
      if (data.interval) {
        clearInterval(data.interval);
      }
      data.interval = setInterval(updateTimer, settings.refreshInterval);

      // initialize the element with the starting value
      render(value);

      function updateTimer() {
        value += increment;
        loopCount++;

        render(value);

        if (typeof(settings.onUpdate) == 'function') {
          settings.onUpdate.call(self, value);
        }

        if (loopCount >= loops) {
          // remove the interval
          $self.removeData('countTo');
          clearInterval(data.interval);
          value = settings.to;

          if (typeof(settings.onComplete) == 'function') {
            settings.onComplete.call(self, value);
          }
        }
      }

      function render(value) {
        var formattedValue = settings.formatter.call(self, value, settings);
        $self.html(formattedValue);
      }
    });
  };

  $.fn.countTo.defaults = {
    from: 0, // the number the element should start at
    to: 0, // the number the element should end at
    speed: 1000, // how long it should take to count between the target numbers
    refreshInterval: 100, // how often the element should be updated
    decimals: 0, // the number of decimal places to show
    formatter: formatter, // handler for formatting the value before rendering
    onUpdate: null, // callback method for every time the element is updated
    onComplete: null // callback method for when the element finishes updating
  };

  function formatter(value, settings) {
    return value.toFixed(settings.decimals);
  }
}(jQuery));

jQuery(function($) {
  // custom formatting example
  $('#count-number').data('countToOptions', {
    formatter: function(value, options) {
      return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
    var $this = $(this);
    options = $.extend({}, options || {}, $this.data('countToOptions') || {});
    $this.countTo(options);
  }
});



// plugin for appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
  // initialise the counters
  var counters = {};
  var i = 0;
  if (singleRun) {
    // track each of the counters
    $(".timer").each(function() {
      counters[this.id] = $(this).data("to");
      i++;
    });
    // animate the counters
    $.each(counters, function(key, val) {
      $({
        countVal: 0
      }).animate({
        countVal: val
      }, {
        duration: 1500,
        easing: "linear",
        step: function() {
          // update the display
          $("#" + key).text(Math.floor(this.countVal));
        }
      });
    });
    singleRun = false;
  }
});
/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
  float: left;
}
.fl-rt {
  float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
a,
a:hover,
a:active {
  outline: 0px !important
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #888888;
  margin: 0;
}
h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  font-size: 16px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  margin: 0 0 60px 0;
}
p {
  line-height: 24px;
  margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
  text-align: center;
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 280px 0;
}
.logo {
  width: 130px;
  margin: 0 auto 35px;
}
.header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0 0 22px 0;
  color: #fff;
}
.we-create {
  padding: 0;
  margin: 35px 0 55px;
}
.wp-pic {
  margin-bottom: 20px;
}
.we-create li {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #bcbcbc;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 5px 0 0;
  padding: 0 0 0 15px;
}
.we-create li:first-child {
  background: none;
}
.start-button {
  padding-left: 0px;
}
.start-button li a {
  color: #fff;
}
.link {
  padding: 15px 35px;
  background: #7cc576;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
  text-decoration: none;
  color: #7cc576 !important;
  background: #fff;
}
.link:active,
.link:focus {
  background: #7cc576;
  text-decoration: none;
  color: #fff !important;
}
/* Team
---------------------------------*/

.team-leader-block {
  max-width: 993px;
  margin: 0 auto;
}
.team-leader-box {
  width: 30.66%;
  margin-right: 3.82979%;
  height: 490px;
  overflow: hidden;
  text-align: center;
  float: left;
}
.team-leader-box span {
  margin-bottom: 24px;
  display: block;
}
.team-leader-box:nth-of-type(3n+0) {
  margin: 0;
}
.team-leader {
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
  margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 50%;
}
.team-leader-shadow a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease-in-out;
  font-size: 20px;
  opacity: 0;
  color: #fff;
  text-decoration: none;
}
.team-leader:hover .team-leader-shadow {
  box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover .team-leader-shadow a {
  opacity: 1;
}
/*.team-leader:hover ul {
  display: block;
  opacity: 7
}*/

.team-leader img {
  display: block;
  border-radius: 50%;
}
.team-leader ul {
  display: block;
  opacity: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -14px;
  z-index: 15;
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/

.team-leader ul p2 {
  display: inline;
  font-size: 25px;
  color: blue;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}
.
/* Footer
---------------------------------*/

.footer {
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 35px 0 35px;
}
.footer-logo {
  margin: 15px auto 35px;
  width: 76px;
}
.copyright,
.credits {
  color: #cccccc;
  font-size: 14px;
  display: block;
  text-align: center;
}
.copyright a,
.credits a {
  color: #7cc576;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.delay-04s {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay-12s {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
#team.main-section.team {
  background-color: #e6e6e6;
}
/*css related to the points box*/

body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
  text-align: center;
}
/*-=-=-=-=-=-=-=-=-=-=-=- */

/* Column Grids */

/*-=-=-=-=-=-=-=-=-=-=-=- */

.team-leader-box {
  .col_half {
    width: 49%;
  }
  .col_third {
    width: 32%;
  }
  .col_fourth {
    width: 23.5%;
  }
  .col_fifth {
    width: 18.4%;
  }
  .col_sixth {
    width: 15%;
  }
  .col_three_fourth {
    width: 74.5%;
  }
  .col_twothird {
    width: 66%;
  }
  .col_half,
  .col_third,
  .col_twothird,
  .col_fourth,
  .col_three_fourth,
  .col_fifth {
    position: relative;
    display: inline;
    display: inline-block;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
  }
  .end {
    margin-right: 0 !important;
  }
  /* Column Grids End */
  .wrapper {
    width: 980px;
    margin: 30px auto;
    position: relative;
  }
  .counter {
    background-color: #808080;
    padding: 10px 0;
    border-radius: 5px;
  }
  .count-title {
    font-size: 40px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .count-text {
    font-size: 13px;
    font-weight: normal;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: center;
  }
  .fa-2x {
    margin: 0 auto;
    float: none;
    display: table;
    color: #4ad1e5;
  }
}
.counter.col_fourth {
  background-color: #fff;
  border-radius: 10px;
}
.counter.col_fourth :hover {
  cursor: pointer;
  cursor: hand;
  color: blue;
}
.counter.col_fourth :hover {
  display: block;
  opacity: 1
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1">

  <title>Homepage</title>
  <link rel="icon" href="favicon.png" type="image/png">
  <link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
  <!-- related to number count -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/style1.css">

  <!-- number count ends -->

  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="css/responsive.css" rel="stylesheet" type="text/css">
  <link href="css/animate.css" rel="stylesheet" type="text/css">

  <!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

  <!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.js"></script>
  <script type="text/javascript" src="js/wow.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script src="contactform/contactform.js"></script>


</head>

<body>
  <header class="header" id="header">
    <!--header-start-->

  </header>
  <!--header-end-->

  <section class="main-section paddind" id="Portfolio">
    <!--main-section-start-->
    <div class="container">
      <h2>Portfolio</h2>
      <h6>Fresh portfolio of designs that will keep you wanting more.</h6>
      <div class="portfolioFilter">
        <ul class="Portfolio-nav wow fadeIn delay-02s">
          <li><a href="#" data-filter="*" class="current">All</a>
          </li>
          <li><a href="#" data-filter=".branding">Branding</a>
          </li>
          <li><a href="#" data-filter=".webdesign">Web design</a>
          </li>
          <li><a href="#" data-filter=".printdesign">Print design</a>
          </li>
          <li><a href="#" data-filter=".photography">Photography</a>
          </li>
        </ul>
      </div>

    </div>
    <div class="portfolioContainer wow fadeInUp delay-04s">
      <div class=" Portfolio-box printdesign">
        <a href="#">
          <img src="img/Portfolio-pic1.jpg" alt="">
        </a>
        <h3>Foto Album</h3>
        <p>Print Design</p>
      </div>
      <div class="Portfolio-box webdesign">
        <a href="#">
          <img src="img/Portfolio-pic2.jpg" alt="">
        </a>
        <h3>Luca Theme</h3>
        <p>Web Design</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic3.jpg" alt="">
        </a>
        <h3>Uni Sans</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic4.jpg" alt="">
        </a>
        <h3>Vinyl Record</h3>
        <p>Photography</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic5.jpg" alt="">
        </a>
        <h3>Hipster</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic6.jpg" alt="">
        </a>
        <h3>Windmills</h3>
        <p>Photography</p>
      </div>
    </div>
  </section>
  <!--main-section-end-->



  <section class="main-section team" id="team">
    <!--main-section team-start-->
    <div class="container">
      <h2>Medals</h2>
      <h6></h6>
      <div class="team-leader-block clearfix">
        <div class="team-leader-box">
          <div class="team-leader wow fadeInDown delay-03s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal1"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">

          </div>


          <!-- Modal -->
          <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Gold Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>


          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number1" data-to="50" data-speed="1500"></h2>
              <p class="count-text ">points</p>

            </div>
          </div>

        </div>
        <!-- update this code -->
        <div class="team-leader-box">
          <div class="team-leader  wow fadeInDown delay-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal2"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
              <p2>Click For Details</p2>
            </ul> -->
          </div>

          <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Silver Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>

          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number2" data-to="30" data-speed="1500"></h2>
              <p class="count-text ">points</p>
            </div>
          </div>
        </div>
        <div class="team-leader-box">
          <div class="team-leader  wow fadeInDown delay-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal3"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
							<p2>Click For Details</p2>
						</ul> -->
          </div>

          <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Bronze Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </div>
          <div class="wrapper wow fadeInDown delay-05s">
            <div class="counter col_fourth">
              <i class="fa fa-check fa-2x"></i>
              <h2 class="timer count-title" id="count-number3" data-to="10" data-speed="1500"></h2>
              <p class="count-text ">points</p>
            </div>
          </div>



        </div>
        <!-- team-leader-box div ends -->
      </div>
      <!-- team-leader-block clearfix div ends -->



      <!-- popup div ends -->
    </div>
    <!-- container div ends -->
  </section>
  <!--main-section team-end-->

  <footer class="footer">
    <div class="container">
      <div class="footer-logo">
        <a href="#">
          <img src="img/footer-logo.png" alt="">
        </a>
      </div>
      <span class="copyright">&copy; Knight Theme. All Rights Reserved</span>
      <div class="credits">

        <a href="https://bootstrapmade.com/free-business-bootstrap-themes-website-templates/">Business Bootstrap Themes</a> by <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>
  </footer>

  <script src="js1/index1.js">
  </script>
</body>

</html>

上面的 fiddle 链接:https://jsfiddle.net/L3tntu6a/

来自社区的帮助:Stack Overflow similar links

最佳答案

您需要检查用户何时滚动或即将滚动 div。例如:

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (x > y) {
     //Put your effect functions in here.
  }
});

您还可以在用户向后滚动时添加效果，或者使用更多 if/else block 添加更多效果。

关于javascript - 仅当该部分出现在浏览器 View 中时，jQuery 才计入目标数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40669650/

上一篇：javascript - ES6，从父级构造函数中访问子级设置的 props

下一篇：javascript - HighCharts 日期格式

相关文章：

javascript - 加密文本每次都改变 -Msrcrypto

javascript - 如何在过滤器中添加/删除类 jQuery？

javascript - Firefox 脚本标签中的异步属性

javascript - 使用 ng-autocomplete 时默认值未预填充输入字段

javascript - 从字符串的第一个和最后一个位置删除双引号或将字符串转换为其他数据类型

javascript - 如何进行 Javascript 调试日志记录

jquery - 在触发 JQuery 幻灯片之前加载所有图像

javascript - jQuery 的事件处理会导致内存泄漏吗？

javascript - 不确定在哪里应用元素的过渡 CSS

javascript - 查询。当我的条件为真时，我们如何一步一步地多次显示相同的 div 而不是一次

©2024 IT工具网  联系我们