站长学院
CMS建站教程 SEO优化攻略
来源:齐鲁建站 栏目:开发教程 阅读: 日期: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