Countdown-倒計時插件

今天我介紹的就是類似這種功能的jquery插件,他不僅能實現上面所述的功能,而且在每個倒計時數字實現動畫的過渡效果。


文章詳情和下載鏈接


$(document).ready(function () {
          /* 延遲函數  */
          jQuery.fn.delay = function (time, func) {
              return this.each(function () {
                  setTimeout(func, time);
              });
          };
          jQuery.fn.countDown = function (settings, to) {
              settings = jQuery.extend({
                  startFontSize: '36px',
                  endFontSize: '12px',
                  duration: 1000,
                  startNumber: 10,
                  endNumber: 0,
                  callBack: function () { }
              }, settings);
              return this.each(function () {
                  if (!to && to != settings.endNumber) { to = settings.startNumber; }
                  //設定倒計時開始的號碼
                  $(this).text(to).css('fontSize', settings.startFontSize);
                  //頁面動畫
                  $(this).animate({
                      'fontSize': settings.endFontSize
                  }, settings.duration, '', function () {
                      if (to > settings.endNumber + 1) {
                          $(this).css('fontSize', settings.startFontSize).text(to - 1).countDown(settings, to - 1);
                      }
                      else {
                          settings.callBack(this);
                      }
                  });
              });
          };
          //使用
          $('#countdown').countDown({
              startNumber: 10,
              callBack: function (me) {
                  $(me).text('All done! This is where you give the reward!').css('color', '#090');
              }
          });
      });




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章