카운팅 스크립트 문의드립니다.

카운팅 스크립트 문의드립니다.

QA

카운팅 스크립트 문의드립니다.

본문

구글링으로 카운팅 스크립트 사용중인데요.

해당 위치에 화면이 가면 숫자가 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


<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>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
// var memberCountConTxt1 = 134;
// var memberCountConTxt2 = 30;
// var memberCountConTxt3 = 99;
// var memberCountConTxt4 = 168;
// var memberCountConTxt5 = 300;
var memberCountConTxts = {
    memberCountCon1: 134, 
    memberCountCon2: 30, 
    memberCountCon3: 99, 
    memberCountCon4: 168, 
    memberCountCon5: 300
};
 
var isVisible = false;
$(window).on("scroll", function () {
  if (checkVisible($(".up_number")) && !isVisible) {
    var memberCountConTxt1 = 134;
    for (let k in memberCountConTxts) {
        drawAnim(k, memberCountConTxts[k]);
    }
    isVisible = true;
  }
});
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);
        },
      }
    );
}
function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
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;
}
</script>

<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT