上周五应着公司临时需求,一天的时间解决掉官网(ps:比较简单哈哈),需求里面有一个特效就是数字递增到指定的数值,其实JS写也不复杂的,但是我发现一个js小插件,这个插件轻巧简单,用起来也非常简单实用。在这里分享给小盆友们吧,喜欢的直接拿走。
第一: HTML部分这里简单列举一个
rush:xhtml;">
博客
上面我们来了解两个关键的东西:
data-to
这个属性控制你最终要递增的数值是多少data-speed
这个看英文的意思就很清楚了就是表示数据递增的速度了
ps: 这里的class和id 根据大家各自的修改去调整就好了,
第二:JS部分也是插件的核心代码
= h) {
f.removeData("countTo");
clearInterval(d.interval);
g = c.to;
if (typeof(c.onComplete) == "function") {
c.onComplete.call(j,g)
}
}
}
function b(m) {
var l = c.formatter.call(j,m,c);
f.html(l)
}
})
};
$.fn.countTo.defaults = {
from: 0,to: 0,speed: 1000,refreshInterval: 100,decimals: 0,formatter: formatter,onUpdate: null,onComplete: null
};
function formatter(b,a) {
return b.toFixed(2)
}
$("#count-number").data("countToOptions",{
formatter: function(b,a) {
return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g,",")
}
});
$(".timer").each(count);
function count(a) {
var b = $(this);
a = $.extend({},a || {},b.data("countToOptions") || {});
b.countTo(a)
};
以上就是代码的全部了,css部分就不在这里显示了,demo下载的小伙伴在下面点击下载吧!
其实这个插件可扩展性很大的,至于小伙伴喜欢什么样子的显示自己动手改造吧!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。