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对应树叶 ...
随机推荐
- python入门:模拟简单用户登录(自写)
#!/usr/bin/env python # -*- coding: utf-8 -*- #模拟简单用户登录(自写) import getpass a = raw_input("Pleas ...
- DNS预解析 dns-prefetch
1.DNS 是什么? Domain Name System,域名系统,作为域名和IP地址相互映射的一个分布式数据库. DNS大家都懂,那么浏览器访问域名的时候,是需要去解析一次DNS,也就是把域名 g ...
- paper:synthesizable finite state machine design techniques using the new systemverilog 3.0 enhancements 之 standard verilog FSM conding styles(二段式)
1.Two always block style with combinational outputs(Good Style) 对应的代码如下: 2段式总结: (1)the combinational ...
- 第6章 AOP与全局异常处理6.5-6.11 慕课网微信小程序开发学习笔记
https://coding.imooc.com/learn/list/97.html 目录: 第6章 AOP与全局异常处理6-1 正确理解异常处理流程 13:236-2 固有的处理异常的思维模式与流 ...
- i2c_drivers个人分析
\arch\arm\mach-mx6\board-mx6q_sabresd.c static struct i2c_board_info i2c_board_info_rtc[] __initdata ...
- JSONP分享-- 在JavaScript中跨域请求
如果你正在开发一个现代的基于web的应用程序,那么你: 在客户端使用JavaScript. 需要集成那些没有完全在你控制之下的服务(或者那些来自不同的域). 在你的浏览器控制台中遇到过这个错误信息: ...
- [POJ 1007] DNA Sorting C++解题
DNA Sorting Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 77786 Accepted: 31201 ...
- Selenium WebDriver-actionchain模拟键盘左键长按
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- Selenium WebDriver-通过断言页面是否存在某些关键字来确定页面按照预期加载
#encoding=utf-8 import unittest import time import chardet from selenium import webdriver class Visi ...
- Java多线程框架源码阅读之---ReentrantLock
ReentrantLock基于Sync内部类来完成锁.Sync有两个不同的子类NonfairSync和FairSync.Sync继承于AbstractQueuedSynchronizer. Reent ...