You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
2.3 KiB

  1. //数字滚动
  2. (function($, window, document) {
  3. "use strict";
  4. var defaults = {
  5. deVal: 0, //传入值
  6. className: 'dataNums', //样式名称
  7. digit: '' //默认显示几位数字
  8. };
  9. function rollNumDaq(obj, options) {
  10. this.obj = obj;
  11. this.options = $.extend(defaults, options);
  12. this.init = function() {
  13. this.initHtml(obj, defaults);
  14. }
  15. }
  16. rollNumDaq.prototype = {
  17. initHtml: function(obj, options) {
  18. var strHtml = '<ul class="' + options.className + ' inrow">';
  19. var valLen = options.digit || (options.deVal + '').length;
  20. console.log(options)
  21. if(obj.find('.' + options.className).length <= 0) {
  22. for(var i = 0; i < valLen; i++) {
  23. strHtml += '<li class="dataOne "><div class="dataBoc"><div class="tt" t="38"><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span><span class="num0">0</span> <span class="num1">1</span> <span class="num2">2</span> <span class="num3">3</span> <span class="num4">4</span><span class="num5">5</span> <span class="num6">6</span> <span class="num7">7</span> <span class="num8">8</span> <span class="num9">9</span></div></div></li>';
  24. }
  25. strHtml += '</ul>';
  26. obj.html(strHtml);
  27. }
  28. this.scroNum(options);
  29. },
  30. scroNum: function(options) {
  31. console.log(options)
  32. var number = options.deVal;
  33. var $num_item = $('.' + options.className).find('.tt');
  34. var h = $('.dataBoc').height();
  35. $num_item.css('transition', 'all 2s ease-in-out');
  36. var numberStr = number.toString();
  37. console.log(numberStr)
  38. if(numberStr.length <= $num_item.length - 1) {
  39. var tempStr = '';
  40. for(var a = 0; a < $num_item.length - numberStr.length; a++) {
  41. tempStr += '0';
  42. }
  43. numberStr = tempStr + numberStr;
  44. }
  45. var numberArr = numberStr.split('');
  46. console.log(numberArr)
  47. $num_item.each(function(i, item) {
  48. setTimeout(function() {
  49. $num_item.eq(i).css('top', (-parseInt(numberArr[i]) * h - h * 10)/1 + 'px');
  50. }, i * 100)
  51. });
  52. }
  53. }
  54. $.fn.rollNumDaq = function(options) {
  55. var $that = this;
  56. var rollNumObj = new rollNumDaq($that, options);
  57. rollNumObj.init();
  58. };
  59. })(jQuery, window, document);