永和九年,岁在癸丑,暮春之初,会于会稽山阴之兰亭,写J S也。
先来看一张JS特效图:
(不知为何GIF显示不了,算了 在线演示吧)
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数字卷轴特效</title>
<script src="./CountUp.js"></script>
<script src="./jquery.min.js"></script>
<style type="text/css">
#box{
font-size: 44px;
font-weight: bold;
color: green;
height:50px;
}
</style>
</head>
<body>
<div id="box"> </div>
<hr/>
<input type="input" name="data" id="inputData"/>
<input type="button" id="dw" value="查看特效">
<script type="text/javascript">
var options = {
useEasing: false,
useGrouping: true,
separator: '',
decimal: '.',
};
function showDynamicData(posi,data){
var demo = new CountUp(posi, 0, data, 2, 1.5, options);
//param1:位置#xxx;param2:0;param3:实时数据;
//param4:小数点后位数;param5:持续时间;param5:动态卷轴实例
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
}
}
$(function(){
$("#dw").click(function(){
showDynamicData('box',$("#inputData").val());
});
});
</script>
</body>
</html>
详细内容 ☞ 源码下载