|
300 | 300 |
|
301 | 301 | $banner |
302 | 302 | ._parallax(); |
| 303 | + //counter |
| 304 | + (function ($) { |
| 305 | + $.fn.countTo = function (options) { |
| 306 | + options = options || {}; |
| 307 | + |
| 308 | + return $(this).each(function () { |
| 309 | + // set options for current element |
| 310 | + var settings = $.extend({}, $.fn.countTo.defaults, { |
| 311 | + from: $(this).data('from'), |
| 312 | + to: $(this).data('to'), |
| 313 | + speed: $(this).data('speed'), |
| 314 | + refreshInterval: $(this).data('refresh-interval'), |
| 315 | + decimals: $(this).data('decimals') |
| 316 | + }, options); |
| 317 | + |
| 318 | + // how many times to update the value, and how much to increment the value on each update |
| 319 | + var loops = Math.ceil(settings.speed / settings.refreshInterval), |
| 320 | + increment = (settings.to - settings.from) / loops; |
| 321 | + |
| 322 | + // references & variables that will change with each update |
| 323 | + var self = this, |
| 324 | + $self = $(this), |
| 325 | + loopCount = 0, |
| 326 | + value = settings.from, |
| 327 | + data = $self.data('countTo') || {}; |
| 328 | + |
| 329 | + $self.data('countTo', data); |
| 330 | + |
| 331 | + // if an existing interval can be found, clear it first |
| 332 | + if (data.interval) { |
| 333 | + clearInterval(data.interval); |
| 334 | + } |
| 335 | + data.interval = setInterval(updateTimer, settings.refreshInterval); |
| 336 | + |
| 337 | + // initialize the element with the starting value |
| 338 | + render(value); |
| 339 | + |
| 340 | + function updateTimer() { |
| 341 | + value += increment; |
| 342 | + loopCount++; |
| 343 | + |
| 344 | + render(value); |
| 345 | + |
| 346 | + if (typeof(settings.onUpdate) == 'function') { |
| 347 | + settings.onUpdate.call(self, value); |
| 348 | + } |
| 349 | + |
| 350 | + if (loopCount >= loops) { |
| 351 | + // remove the interval |
| 352 | + $self.removeData('countTo'); |
| 353 | + clearInterval(data.interval); |
| 354 | + value = settings.to; |
| 355 | + |
| 356 | + if (typeof(settings.onComplete) == 'function') { |
| 357 | + settings.onComplete.call(self, value); |
| 358 | + } |
| 359 | + } |
| 360 | + } |
| 361 | + |
| 362 | + function render(value) { |
| 363 | + var formattedValue = settings.formatter.call(self, value, settings); |
| 364 | + $self.html(formattedValue); |
| 365 | + } |
| 366 | + }); |
| 367 | + }; |
| 368 | + |
| 369 | + $.fn.countTo.defaults = { |
| 370 | + from: 0, // the number the element should start at |
| 371 | + to: 0, // the number the element should end at |
| 372 | + speed: 1000, // how long it should take to count between the target numbers |
| 373 | + refreshInterval: 100, // how often the element should be updated |
| 374 | + decimals: 0, // the number of decimal places to show |
| 375 | + formatter: formatter, // handler for formatting the value before rendering |
| 376 | + onUpdate: null, // callback method for every time the element is updated |
| 377 | + onComplete: null // callback method for when the element finishes updating |
| 378 | + }; |
| 379 | + |
| 380 | + function formatter(value, settings) { |
| 381 | + return value.toFixed(settings.decimals); |
| 382 | + } |
| 383 | +}(jQuery)); |
| 384 | + |
| 385 | +jQuery(function ($) { |
| 386 | + // custom formatting example |
| 387 | + $('.count-number').data('countToOptions', { |
| 388 | + formatter: function (value, options) { |
| 389 | + return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); |
| 390 | + } |
| 391 | + }); |
| 392 | + |
| 393 | + // start all the timers |
| 394 | + $('.timer').each(count); |
| 395 | + |
| 396 | + function count(options) { |
| 397 | + var $this = $(this); |
| 398 | + options = $.extend({}, options || {}, $this.data('countToOptions') || {}); |
| 399 | + $this.countTo(options); |
| 400 | + } |
| 401 | +}); |
303 | 402 |
|
304 | 403 | }); |
305 | 404 |
|
|
0 commit comments