카운팅 스크립트 문의드립니다. 채택완료
구글링으로 카운팅 스크립트 사용중인데요.
해당 위치에 화면이 가면 숫자가 0에서 적어둔 숫자로 올라가는 기능입니다.
1개로 사용하다가 총 5개의 숫자가 필요하네요.
어떻게 하면 다중으로 사용가능할까요?
var memberCountConTxt1 = 134;
var memberCountConTxt2 = 30;
var memberCountConTxt3 = 99;
var memberCountConTxt4 = 168;
var memberCountConTxt5 = 300;
이렇게 사용하려 합니다.
var isVisible = false;
$(window).on("scroll", function () {
if (checkVisible($(".up_number")) && !isVisible) {
var memberCountConTxt1 = 134;
$({ val: 0 }).animate(
{ val: memberCountConTxt1 },
{
duration: 1500,
step: function () {
var num = numberWithCommas(Math.floor(this.val));
$(".memberCountCon1").text(num);
},
complete: function () {
var num = numberWithCommas(Math.floor(this.val));
$(".memberCountCon1").text(num);
},
}
);
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
isVisible = true;
}
});
function checkVisible(elm, eval) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();
if (eval == "object visible")
return y < viewportHeight + scrolltop && y > scrolltop - elementHeight;
if (eval == "above") return y < viewportHeight + scrolltop;
}
답변 1개
</p>
<p><style>
.up_number {
background-color: #ddd;
width: 1em;
height: 100em;
}
.memberCountCon {
position: fixed;
border: 1px solid gray;
width: 10em;
height: 1.2em;
}
.memberCountCon1 { left: 1em; top: 1em; }
.memberCountCon2 { left: 3em; top: 3em; }
.memberCountCon3 { left: 5em; top: 5em; }
.memberCountCon4 { left: 7em; top: 7em; }
.memberCountCon5 { left: 9em; top: 9em; }
</style></p>
<p><script src="<a href="http://code.jquery.com/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery.min.js"></script></a>
<script>
// var memberCountConTxt1 = 134;
// var memberCountConTxt2 = 30;
// var memberCountConTxt3 = 99;
// var memberCountConTxt4 = 168;
// var memberCountConTxt5 = 300;</p>
<p>var memberCountConTxts = {
memberCountCon1: 134,
memberCountCon2: 30,
memberCountCon3: 99,
memberCountCon4: 168,
memberCountCon5: 300
};</p>
<p> </p>
<p>var isVisible = false;</p>
<p>$(window).on("scroll", function () {
if (checkVisible($(".up_number")) && !isVisible) {
var memberCountConTxt1 = 134;</p>
<p> for (let k in memberCountConTxts) {
drawAnim(k, memberCountConTxts[k]);
}</p>
<p> isVisible = true;
}
});</p>
<p>function drawAnim(k, v) {
$({ val: 0 }).animate(
{ val: v },
{
duration: 1500,
step: function () {
var num = numberWithCommas(Math.floor(this.val));
$("." + k).text(num);
},
complete: function () {
var num = numberWithCommas(Math.floor(this.val));
$("." + k).text(num);
},
}
);
}</p>
<p>function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}</p>
<p>function checkVisible(elm, eval) {
eval = eval || "object visible";
var viewportHeight = $(window).height(), // Viewport Height
scrolltop = $(window).scrollTop(), // Scroll Top
y = $(elm).offset().top,
elementHeight = $(elm).height();</p>
<p> if (eval == "object visible")
return y < viewportHeight + scrolltop && y > scrolltop - elementHeight;
if (eval == "above") return y < viewportHeight + scrolltop;
}
</script></p>
<p>
<div class="up_number"></div>
<div class="memberCountCon memberCountCon1"></div>
<div class="memberCountCon memberCountCon2"></div>
<div class="memberCountCon memberCountCon3"></div>
<div class="memberCountCon memberCountCon4"></div>
<div class="memberCountCon memberCountCon5"></div></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
보고 공부하겠습니다.
감사드립니다!!