Jquery数字计数到一个目标数字
jquery number count to a target number
我有一个网站:我的网站，我已经建立了一个jQuery计数器计数到在团队中的点的目标数字。请点击团队标签
问题:
1。当我加载页面时，jquery点计数工作正常。让我们假设当您进入团队部分并刷新页面时。但是当我滚动到各个部分并到达团队部分时，效果并没有显示出来。它看起来像正常的数字。当用户滚动到"团队"部分时，是否有可能显示带有该效果的数字计数。该部分的代码:
(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);
}
});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;
}<section class="main-section team" id="team">
<!--main-section team-start-->
<div class="container">
<h2>team</h2>
<h6>Take a closer look into our amazing team. We won’t bite.</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="#"></a>
</div>
<img src="img/team-leader-pic1.jpg" alt="">
<ul>
<li>
<a href="#" class="fa-twitter"></a>
</li>
<li>
<a href="#" class="fa-facebook"></a>
</li>
<li>
<a href="#" class="fa-pinterest"></a>
</li>
<li>
<a href="#" class="fa-google-plus"></a>
</li>
</ul>
</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-number" data-to="50" data-speed="1500"></h2>
<p class="count-text ">points</p>
<p1>click to know</p1>
</div>
</div>
</div>
<div class="team-leader-box">
<div class="team-leader wow fadeInDown delay-06s">
<div class="team-leader-shadow">
<a href="#"></a>
</div>
<img src="img/team-leader-pic2.jpg" alt="">
<ul>
<li>
<a href="#" class="fa-twitter"></a>
</li>
<li>
<a href="#" class="fa-facebook"></a>
</li>
<li>
<a href="#" class="fa-pinterest"></a>
</li>
<li>
<a href="#" class="fa-google-plus"></a>
</li>
</ul>
</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-number" 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-09s">
<div class="team-leader-shadow">
<a href="#"></a>
</div>
<img src="img/team-leader-pic3.jpg" alt="">
<ul>
<li>
<a href="#" class="fa-twitter"></a>
</li>
<li>
<a href="#" class="fa-facebook"></a>
</li>
<li>
<a href="#" class="fa-pinterest"></a>
</li>
<li>
<a href="#" class="fa-google-plus"></a>
</li>
</ul>
</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-number" data-to="10" data-speed="1500"></h2>
<p class="count-text ">points</p>
</div>
</div>
</div>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__inner">
<header class="popup__header">
<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
</header>
<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" />
<!--
-->
<section class="profile__details">
<ul class="profile__stats">
<li>
<h3 class="profile_stat__heading">Gold</h3>
<div class="profile_stat__number">17</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Silver</h3>
<div class="profile_stat__number">8</div>
</li>
<!--
-->
<li>
<h3 class="profile_stat__heading">Bronze</h3>
<div class="profile_stat__number">21</div>
</li>
</ul>
<h2 class="profile__name" id="popup-name"></h2>
<h2 class="profile__name">Designation: </h2>
<h2 class="profile__name">Reporting Manager: </h2>
<h2 class="profile__name">Email: </h2>
<h2 class="profile__name">Date of Join: </h2>
<h2 class="profile__name" id="popup-score"></h2>
<h2 class="profile__name">Latest Week Points: </h2>
<h2 class="profile__name">Overall Points: </h2>
<h2 class="profile__name">Medals Rewarded:</h2>
<ul class="social">
<li><a href="#"><i class="fa fa-github"></i></a>
</li>
<!--
-->
<li><a href="#"><i class="fa fa-instagram"></i></a>
</li>
<!--
-->
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<!--
-->
<li><a href="#"><i class="fa fa-bitbucket"></i></a>
</li>
<!--
-->
<li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span>
</li>
</ul>
</section>
</div>
</div>
</section>这个问题我以前问过，我知道。jquery数字计数到一个目标数字和弹出显示点击。按照要求，我把问题分开了。
请帮助。
使用jquery。出现插件。它实现了自定义的出现/消失事件，当一个元素在浏览器视口中变为可见/不可见时触发。
下面的代码将给你一个简单的动画效果使用插件。您需要确保每个.timer元素都有一个唯一的id属性，以使其正常工作。
// 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;
}
});<div class="wrapper wow fadeInDown delay-05s">
<div class="counter col_fourth">
<i class="fa fa-check fa-2x"></i>
<!-- Remember a timer requires a unique id value -->
<h2 class="timer count-title" id="UNIQUE-ID-HERE" data-to="10"></h2>
<p class="count-text ">points</p>
</div>
</div>相关文章：
- 递增一个数字而不去掉前导零
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- 我想在AngularJS应用程序中创建一个输入数字框，用户不应该在该框上键入十进制数字.(一个整数输入框）
- 制作一个regex来验证只有一个数字的字符串
- 如何限制一个字段只接受4个数字字符作为输入，并获得'It’这是潜水警报
- 为什么这个正则表达式不't匹配最后一个字母数字字符
- 一个jquery验证器方法，它不接受纯数字或纯特殊字符，但接受上面是否有字母
- 如何拆分一个整数和产生的所有数字来创建一个新数字
- 如何使用至少一个数字、一个大写字母和6-20个字符验证密码
- 当与另一个实例进行比较时，我的类实例如何隐式返回数字
- 简单的Javascript方式，在输入字段的每5位数字后添加一个空格
- 有没有办法在里面看到一个数字'的64位浮点IEEE754表示
- PHP函数识别3个数字中最低的一个并更改其类
- 我如何解析二's是一个数字的补码字符串
- 为什么我需要在这里输入var，为什么它会给我一个数字作为答案?(Javascript）
- 在我的网站上创建一个在1-10之间不断变化的数字时遇到了问题.Javascript
- 如何获取一个以零开头的数字的位数
- 如何创建一个确定2个数字之间值的函数
- 当我添加一个新数字时，如何获得一些数字的即时平均值
- 为什么 JavaScript 如果一个数字有一个前导零，就将其视为八进制
