jq引入插件实现数字滚动
warning:
这篇文章距离上次修改已过447天,其中的内容可能已经有所变动。
要使用jQuery插件实现数字滚动,可以使用jquery-countup库。以下是如何使用jquery-countup的简单示例:
- 首先,确保你已经在你的项目中包含了jQuery库和
jquery.countup.js。你可以通过CDN引入它们:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.7/countUp.min.js"></script>- 在HTML中,为想要滚动显示数字的元素添加一个带有
data-countup属性的元素:
<div id="number">8425</div>- 使用jQuery初始化
countUp:
$(document).ready(function() {
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
};
var demo = new countUp.CountUp('number', 0, 8425, 0, 2.5, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
});在上面的代码中,countUp.CountUp构造函数的第一个参数是元素的ID,第二个参数是数字滚动的起始值,第三个参数是目标值,后面的参数是配置选项。调用start方法后,数字就会从起始值滚动到目标值。
评论已关闭