继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Countdown-倒计时插件

linux快速入门培训
关注TA
已关注
手记 266
粉丝 31
获赞 120

今天我介绍的就是类似这种功能的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');              }          });      });




打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP