成都网站建设设计

将想法与焦点和您一起共享

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');
              }
          });
      });


当前名称:Countdown-倒计时插件
网页链接:http://chengdu.cdxwcx.cn/article/jcieie.html