参考网址: http://yanshi.sucaihuo.com/jquery/22/2226/demo/
里面有详细的解释
下面是案例效果demo,其中jquery.running.css与jquery.running.min.js文件下载地址:https://pan.baidu.com/s/1ZnygQuFE5kLUKLuDaROAcA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.running.js</title>
<link rel="stylesheet" href="css/comment/jquery.running.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.running.min.js"></script>
<style>
</style>
<script>
$(function () {
$('body').running();
});
</script>
</head>
<body>
<div class="item selected">
<div class="text">
<h2>数字跑动场景</h2>
<div class="attr">
<dl>
<dd class="d1">
<h4>目标额</h4>
<h3><span class="animateNum" data-animatetype="num" data-animatetarget="999.9">999.9</span>万</h3>
</dd>
<dd class="d2">
<h4>已完成</h4>
<h3><span class="animateNum" data-animatetarget="30">30</span>%</h3>
</dd>
<dd class="d3">
<h4>已认投</h4>
<h3><span class="animateNum" data-animatetarget="999.9">999.9</span>万</h3>
</dd>
</dl>
</div>
</div>
</div>
<div class="pie animatePie" data-animatetarget="89">
<div class="pieLeft">
<div class="pieLeftInner"></div>
</div>
<div class="pieRight">
<div class="pieRightInner"></div>
</div>
<div class="pieInner"><span>89</span>%</div>
</div>
</body>
</html>
运行效果
注意:
jquery.running.min.js中有滚轮事件,因此,运行时必须滚动滚轮,效果才能显示