15621857753

不用滚屏就能滚动变化的数字插件countUp实例

来源:齐鲁建站 栏目:建站教程 阅读: 日期:2021-10-29

大家都知道countUp.JS是用非常棒的数字滚动效果插件,不过用的时候需要滚屏才能实现数字加载,本例给出的是不用滚屏数字就能变化的实列,非常有用哦,直接使用了。

一、实例1,一个数字滚动

1)DIV代码

<span id="num1">1000</span>

2)JS代码

<script src="jquery-1.7.2.min.js.js"></script>

<script src="countUp.js"></script>

<script type="text/javascript">
var options = {
useEasing : true, 
useGrouping : true, 
separator : ',', 
decimal : '.', 
prefix : '', 
suffix : '' 
};
var num1 = new CountUp('num1', 0, 1000, 0, 2.5, options);
if (!num1.error) {
num1.start();
} else {
console.error(num1.error);
}
</script>

二、实例2,两个数字滚动

1)DIV代码

<span id="huanzhe">1000</span>

<span id="shouru">1000</span>

2)JS代码

<script type="text/javascript">
var options = {
useEasing : true, 
useGrouping : true, 
separator : ',', 
decimal : '.', 
prefix : '', 
suffix : '' 
};
var huanzhe = new CountUp("huanzhe", 0, 110, 0, 2.5, options);
var shouru = new CountUp("shouru", 0, 2800, 0, 2.5, options);
if (!huanzhe.error) {
    huanzhe.start();
    shouru.start();
} else {
    console.error(huanzhe.error);
}
</script>

【附件下载】

countUp插件下载地址:https://www.92jzh.com/free/qita/328.html

响应式网站建设

展开