利用CountUp.js 实现数字跳转效果
2018-08-24 本文已影响0人
一颗北上广的心
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<script src="${pageContext.request.contextPath}/script/plugins/inspinia/js/jquery-2.1.1.js"></script>
<script src="${pageContext.request.contextPath}/script/js/countUp.js"></script>
</head>
<body>
<h2 id="number"></h2>
<script type="text/javascript">
numberJump('number',123456,'km')
function numberJump(elementId, target, suffix) {
if (!$('#' + elementId).attr('data-src')) {
$('#' + elementId).attr('data-src', 0);
}
var src = $('#' + elementId).attr('data-src');
if (src == target) {
return;
}
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
suffix: suffix || ''
};
var demo = new CountUp(elementId, src, target, 0, 4, options);
demo.start();
$('#' + elementId).attr('data-src', target);
}
</script>
</body>
</html>
