z 数据过渡效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="count.js"></script>
</head>
<body>
<div class="numCount">
<span class="numCX" data-startVal="0" data-endVal="100" data-speed="4" data-decimals="0" id="mumC1">0</span>
</div>
</body>
<script type="text/javascript">
$(function () {
var countCXArr = [];
var countCX = function () {
$('.numCount').each(function (i, dom) {
if (countCXArr[i] && countCXArr[i] === true) {
return;
}
var sT;
var ncTop;
sT = $(window).scrollTop();
ncTop = $(dom).offset().top;
var id, decimals, startVal, endVal, duration;
if (sT > ncTop - $(window).height() && sT < ncTop) {
$(dom).find('.numCX').each(function () {
id = $(this).attr('id');
decimals = $(this).attr('data-decimals'),
startVal = $(this).attr('data-startVal'),
endVal = $(this).attr('data-endVal'),
duration = $(this).attr('data-speed');
new CountUp(id, startVal, endVal, decimals, duration, {
useEasing: true,//效果
separator: ''//数字分隔符
}).start();// target：目标元素id, startVal：你想要开始的值, endVal：你想要到达的值, decimals：小数位数，默认值为0, duration：动画持续时间为秒，默认值为2, options：选项的可选对象
countCXArr[i] = true;
})
}
})
}
countCX();
$(window).on("scroll", function () {
countCX();
})
});
</script>
</html>
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
