本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好。
但是,最终效果不理想!
Why?
最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个效果OUT!
改变思路
需求:在规定的时间内,实现数字由:初始值滚动到指定的数字
找到一个动画插件:jquery.animateNumber.js
html:
<span id="bmikece" style="font-size: 35px;"><%=user.available_predeposit %></span> //后台绑定的最终需显示的数据
js:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.animateNumber.js"></script> //需引用的插件基于js
//调用numCount()
numCount();
//数字递增效果
function numCount() {
//小数点位允许多少
var decimal_places = 2;
var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
$('#bmikece')
.animateNumber(
{
number: (<%=user.available_predeposit %>) * decimal_factor,
numberStep: function(now, tween) {
var floored_number = Math.floor(now) / decimal_factor,
target = $(tween.elem);
if (decimal_places > 0) {
//强迫小数点,即使它们是0。
floored_number = floored_number.toFixed(decimal_places);
//用','替换'分隔符'
floored_number = floored_number.toString().replace('.', '.');
}
target.text(floored_number);
}
},2000);
}
最终的效果还是不错的(笑脸)