如何解决如何将jQuery Counter停在最后离开的地方？
我的网站上有一个简单的jquery计数器。它设计为在视口中启动，但是当您进一步滚动时，计数器会重置。我如何将柜台停在最后离开的地方？
请随时编辑或使用代码：
https://jsfiddle.net/52x0uyjp/18/
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
console.log(isInViewport($('#number3').get(0)))
$.fn.jQuerySimpleCounter = function(options) {
var settings = $.extend({
start: 0,end: 100,easing: 'swing',duration: 400,complete: ''
},options);
var thisElement = $(this);
$({
count: settings.start
}).animate({
count: settings.end
},{
duration: settings.duration,easing: settings.easing,step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},complete: settings.complete
});
}
function startCounters() {
if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
end: 52,duration: 5000
});
if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
end: 52,duration: 5000
});
if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
end: 52,duration: 5000
});
}
$(document).ready(function() {
startCounters()
})
$(window).on("scroll",function() {
startCounters()
}).projectFactsWrap {
display: flex;
margin-top: 0px;
flex-direction: row;
flex-wrap: wrap;
}
#projectFacts .fullWidth {
padding: 0;
}
.projectFactsWrap .item {
width: 33%;
height: 100%;
padding: 50px 0px;
text-align: center;
}
.projectFactsWrap .item:nth-child(1) {
background: rgb(16,31,46);
}
.projectFactsWrap .item:nth-child(2) {
background: rgb(18,34,51);
}
.projectFactsWrap .item:nth-child(3) {
background: rgb(21,38,56);
}
.projectFactsWrap .item p.number {
font-size: 40px;
padding: 0;
font-weight: bold;
}
.projectFactsWrap .item p {
color: rgba(255,255,0.8);
font-size: 18px;
margin: 0;
padding: 10px;
}
.projectFactsWrap .item span {
width: 50px;
background: rgba(255,0.8);
height: 2px;
display: block;
margin: 0 auto;
}
.projectFactsWrap .item i {
vertical-align: middle;
font-size: 50px;
color: rgba(255,0.8);
}
.projectFactsWrap .item:hover i,.projectFactsWrap .item:hover p {
color: white;
}
.projectFactsWrap .item:hover span {
background: red;
}
@media (max-width: 786px) {
.projectFactsWrap .item {
flex: 0 0 100%;
}
}
.mTop1000 {
padding-top: 1800px;
border: 1px solid red;
padding-bottom: 1000px;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="projectFacts" class="sectionClass">
<div class="fullWidth eight columns">
<div class="projectFactsWrap2">
<div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
<i class="fa fa-briefcase"></i>
<p id="number1" class="number">52</p>
<span></span>
<p>Projects</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
<i class="fa fa-smile-o"></i>
<p id="number2" class="number">34</p>
<span></span>
<p>Clients</p>
</div>
<div class="mTop1000">
This just gives you a space
</div>
<div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
<i class="fa fa-coffee"></i>
<p id="number3" class="number">18</p>
<span></span>
<p>Coffee</p>
</div>
</div>
</div>
</div>解决方法
您可以使用data-attributes来存储计数器，如下所示。
您需要做的就是修改计数器开始位置：
var isCounting = thisElement.data("isCounting");
if (isCounting) return;
thisElement.data("isCounting",true);
然后在您的动画代码中，添加一个将data属性设置为false的回调：
() => {
thisElement.data("isCounting",false);
})
编辑：根据评论进行了编辑。
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
console.log(isInViewport($('#number3').get(0)))
$.fn.jQuerySimpleCounter = function(options) {
var settings = $.extend({
start: 0,end: 100,easing: 'swing',duration: 400,complete: ''
},options);
var thisElement = $(this);
var isCounting = thisElement.data("isCounting");
if (isCounting) return;
thisElement.data("isCounting",true);
$({
count: settings.start
}).animate({
count: settings.end
},{
duration: settings.duration,easing: settings.easing,step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},complete: settings.complete
},() => {
thisElement.data("isCounting",false);
});
}
function startCounters() {
if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
end: 52,duration: 5000
});
if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
end: 52,duration: 5000
});
if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
end: 52,duration: 5000
});
}
$(document).ready(function() {
startCounters()
})
$(window).on("scroll",function() {
startCounters()
}).projectFactsWrap {
display: flex;
margin-top: 0px;
flex-direction: row;
flex-wrap: wrap;
}
#projectFacts .fullWidth {
padding: 0;
}
.projectFactsWrap .item {
width: 33%;
height: 100%;
padding: 50px 0px;
text-align: center;
}
.projectFactsWrap .item:nth-child(1) {
background: rgb(16,31,46);
}
.projectFactsWrap .item:nth-child(2) {
background: rgb(18,34,51);
}
.projectFactsWrap .item:nth-child(3) {
background: rgb(21,38,56);
}
.projectFactsWrap .item p.number {
font-size: 40px;
padding: 0;
font-weight: bold;
}
.projectFactsWrap .item p {
color: rgba(255,255,0.8);
font-size: 18px;
margin: 0;
padding: 10px;
}
.projectFactsWrap .item span {
width: 50px;
background: rgba(255,0.8);
height: 2px;
display: block;
margin: 0 auto;
}
.projectFactsWrap .item i {
vertical-align: middle;
font-size: 50px;
color: rgba(255,0.8);
}
.projectFactsWrap .item:hover i,.projectFactsWrap .item:hover p {
color: white;
}
.projectFactsWrap .item:hover span {
background: red;
}
@media (max-width: 786px) {
.projectFactsWrap .item {
flex: 0 0 100%;
}
}
.mTop1000 {
padding-top: 1800px;
border: 1px solid red;
padding-bottom: 1000px;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="projectFacts" class="sectionClass">
<div class="fullWidth eight columns">
<div class="projectFactsWrap2">
<div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
<i class="fa fa-briefcase"></i>
<p id="number1" class="number">52</p>
<span></span>
<p>Projects</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
<i class="fa fa-smile-o"></i>
<p id="number2" class="number">34</p>
<span></span>
<p>Clients</p>
</div>
<div class="mTop1000">
This just gives you a space
</div>
<div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
<i class="fa fa-coffee"></i>
<p id="number3" class="number">18</p>
<span></span>
<p>Coffee</p>
</div>
</div>
</div>
</div>,
这会更好。您可能需要停止退出视口的计数，但是当您这样做时，我的代码将从原来的位置开始
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
console.log(isInViewport($('#number3').get(0)))
$.fn.jQuerySimpleCounter = function(options) {
var settings = $.extend({
start: 0,options);
var thisElement = $(this);
$({
count: settings.start
}).animate({
count: settings.end
},complete: settings.complete
});
}
function startCounters() {
const start1 = +$('#number1').text();
const end1 = +$('#number1').closest(".item").data("number");
const start2 = +$('#number2').text();
const end2 = +$('#number2').closest(".item").data("number");
const start3 = +$('#number3').text();
const end3 = +$('#number3').closest(".item").data("number");
if (isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({
start: start1,end: end1,duration: 5000
});
if (isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({
start: start2,end: end2,duration: 5000
});
if (isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({
start: start3,end: end3,.projectFactsWrap .item:hover p {
color: white;
}
.projectFactsWrap .item:hover span {
background: red;
}
@media (max-width: 786px) {
.projectFactsWrap .item {
flex: 0 0 100%;
}
}
.mTop1000 {
padding-top: 1800px;
border: 1px solid red;
padding-bottom: 1000px;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div id="projectFacts" class="sectionClass">
<div class="fullWidth eight columns">
<div class="projectFactsWrap2">
<div class="item wow fadeInUpBig animated animated" data-number="52" style="visibility: visible;">
<i class="fa fa-briefcase"></i>
<p id="number1" class="number">0</p>
<span></span>
<p>Projects</p>
</div>
<div class="item wow fadeInUpBig animated animated" data-number="34" style="visibility: visible;">
<i class="fa fa-smile-o"></i>
<p id="number2" class="number">0</p>
<span></span>
<p>Clients</p>
</div>
<div class="mTop1000">
This just gives you a space
</div>
<div class=" item wow fadeInUpBig animated animated" data-number="18" style="visibility: visible;">
<i class="fa fa-coffee"></i>
<p id="number3" class="number">0</p>
<span></span>
<p>Coffee</p>
</div>
</div>
</div>
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。