js 구현(내 부의 모방) 디지털 증분 특수 효과 코드 공유

이번 글에서는 참고 가치가 매우 좋은 Alipay My Wealth의 디지털 증분 효과를 모방하기 위한 js 구현을 주로 소개합니다. 아래 에디터와 함께 살펴보겠습니다

지난 금요일, 회사의 일시적인 필요에 부응하여 하루 만에 공식 홈페이지를 완성했습니다(ps: 비교적 간단합니다 ㅎㅎ) 수요에 특별한 효과가 있습니다. 즉, 숫자를 지정된 값으로 늘리는 것입니다. 사실 JS를 작성하는 것은 복잡하지 않지만 작은 js 플러그인을 발견했습니다. 이 플러그인은 가볍고 간단하며 사용하기에도 매우 간단합니다. . 여기에서 어린 친구들과 공유하고 마음에 들면 가져가세요.

위는 이 플러그인의 효과입니다. 사용 방법을 살펴보겠습니다.

먼저 간략한 내용은 이렇습니다. HTML 부분 목록

 <p class="counter col_fourth">
  <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
  <p class="count-text ">小月博客</p>
 </p>

위의 두 가지 핵심 사항을 이해해 봅시다:

• data-to 속성 증가하려는 최종 값을 제어합니다.

• data-speed 이 의미는 영어로 매우 분명, 데이터가 빠르게 증가하고 있다는 뜻입니다

ps: 여기의 클래스와 ID는 모든 사람의 수정에 따라 조정될 수 있습니다.

둘째: JS 부분도 플러그인의 핵심 코드입니다

$.fn.countTo = function(a) {
  a = a || {};
  return $(this).each(function() {
   var c = $.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")
   }, a);
  var h = Math.ceil(c.speed / c.refreshInterval),
  i = (c.to - c.from) / h;
  var j = this,
  f = $(this),
  e = 0,
  g = c.from,
  d = f.data("countTo") || {};
  f.data("countTo", d);
  if (d.interval) {
   clearInterval(d.interval)
  }
  d.interval = setInterval(k, c.refreshInterval);
  b(g);
  function k() {
   g += i;
   e++;
   b(g);
   if (typeof(c.onUpdate) == "function") {
    c.onUpdate.call(j, g)
   }
   if (e >= h) {
    f.removeData("countTo");
    clearInterval(d.interval);
    g = c.to;
    if (typeof(c.onComplete) == "function") {
     c.onComplete.call(j, g)
    }
   }
  }
  function b(m) {
   var l = c.formatter.call(j, m, c);
   f.html(l)
  }
 })
};
$.fn.countTo.defaults = {
  from: 0,
  to: 0,
  speed: 1000,
  refreshInterval: 100,
  decimals: 0,
  formatter: formatter,
  onUpdate: null,
  onComplete: null
};
function formatter(b, a) {
  return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
  formatter: function(b, a) {
   return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
  }
});
$(".timer").each(count);
function count(a) {
  var b = $(this);
  a = $.extend({},
  a || {},
  b.data("countToOptions") || {});
  b.countTo(a)
};

위 코드는 모두 코드이고, CSS 부분은 여기에 표시되지 않습니다. 데모를 다운로드하려면, 아래를 클릭하여 다운로드하세요!

사실 이 플러그인은 확장성이 매우 뛰어납니다. 친구들이 어떤 종류의 디스플레이를 좋아하는지 직접 수정할 수 있습니다!

[관련 추천]

1. 무료 js 온라인 동영상 튜토리얼

JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 비디오 튜토리얼

위 내용은 js 구현(내 부의 모방) 디지털 증분 특수 효과 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!