js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js
本来在项目中我自己实现的效果是数字由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);
}
最终的效果还是不错的(笑脸)
js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js的更多相关文章
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- jQuery响应式幻灯片插件jquery.glide.js(支持触摸&轻量级)
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
- jQuery滚动条插件 – jquery.slimscroll.js
jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...
- 基于jQuery开发的手风琴插件 jquery.accordion.js
1.插件代码 少说多做,基于jQuery的手风琴插件jquery.accordion.js的代码: /* * 手风琴插件说明: * 1.treeTrunk对应树干 * 2.treeLeaf对应树叶 ...
随机推荐
- (68)zabbix windows性能计数器使用详解
概述 windows下的性能计数器让zabbix监控更加轻松,直接获取性能计数器的数值即可完成windows监控.性能计数器如下: 1 perf_counter["\Processor( ...
- Vue表单输入绑定
<h3>基础用法</h3> <p>你可以用<strong>v-model</strong>指令在表单input,textarea以及sele ...
- Lecture 2
1. Coordinate(坐标) data for GIS real coordinate system:Cartesian coordinate systems(笛卡尔坐标系) from 3D t ...
- python之函数基础总结
定义:函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可. def sayhi(name): print("Hello, %s, I', nobo ...
- 带权并查集:CF-2015 ACM Arabella Collegiate Programming Contest(F题)
F. Palindrome Problem Description A string is palindrome if it can be read the same way in either di ...
- Memcached配置失误引发的Keystone token丢失的问题
故障现象 近期公司的OpenStack上频繁出现虚拟机创建失败的情况,查看日志定位到问题出在neutron-server向keystone认证token失败. 故障原因 Keystone所使用的Mem ...
- POJ 3057 网络流 Evacuation
题意: 有一个n×m的房间,四周每个格子要么是墙要么是门.中间部分是墙或者人. 现在所有人要从房间逃出去,每个人的速度为1,也就是每个单位时间只能向上下左右四个方向走一格. 多个人可以站在同一个格子上 ...
- HDU 3394 双连通分量 桥 Railway
第一个答案是统计图中桥的个数 如果一个点-双连通分量中边的个数大于点的个数那么这个块中所有的边都是冲突的,累加到第二个答案中去. #include <iostream> #include ...
- 《小团团团队》第八次团队作业:Alpha冲刺
项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 小团团团队 作业学习目标 (1)掌握软件测试基础技术; (2)学 ...
- Python 基础(一)
本章内容 1.编译和解释型语言的区别 2.Python的解释器 3.pyc文件 4.运行环境 5.变量 6.数据类型 7.字符编码 8.三元运算 编译和解释型语言的区别 编译器是把源程序的每一条语句都 ...