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对应树叶 ...
随机推荐
- 11Vim文本编辑器
Vim文本编辑器 在Linux系统中一切都是文件,而配置一个服务就是在修改其配置文件的参数. Vim提供了三种模式:命令模式.输入模式.末行模式 1.命令模式 每次运行Vim编辑器时,默认进入命令模式 ...
- DeepFaceLab小白入门(6):脸部替换以及合成视频!
前面的都是准备工作,这个环节才是真的换脸.换脸主要分两部分,1,图片换脸,2,把图片合成视频. 7) convert H64 debug.bat 这个环节是和训练环节相对于的,比如我们之前选的是H64 ...
- 补之前 如何改变jupyter打开文件的路径
目录 如何改变jupyter打开文件的路径 第一种方法: 第二种方法 第三种方法 如何改变jupyter打开文件的路径 当我们直接打开jupyter时,直接加载的是我们的C盘文件 现在我们想打开其他盘 ...
- Python PycURL的安装使用
PycURL中文简介:https://blog.csdn.net/qq_41185868/article/details/80487014 PycURL英文简介(如下):http://pycurl.i ...
- 修改Typora的快捷键【markdown软件】
修改Typora的快捷键 魔芋:Typora是一款不错的编写markdowm的软件,推荐使用. 魔芋:修改这个文件conf.user.json "keyBinding": { ...
- LINQ 的查询执行何时是延迟执行,何时是立即执行,以及查询的复用
延迟执行的经典例子: 我们用 select ++i 就可以看到在foreach 时候,查询才被执行. public static void Linq99(){ int[] numbers = n ...
- python - work3
# -*- coding:utf-8 -*- '''@project: jiaxy@author: Jimmy@file: work_20181107.py@ide: PyCharm Communit ...
- foreach 、 for 换成 ForEach
List<tBaseRolerMapPower> list =new List<tBaseRolerMapPower>() string strName = string.E ...
- 命令行客户端操作pg数据库常用操作
登录 # su - postgres -c "psql" 或者 $psql -U user_name -d database_name -h serverhost psql (10 ...
- Frequent values(ST)
描述 You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. In addition to ...