CountUp.js数字滚动插件使用方法详解
CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果
演示地址: countUp.js
可配置项:
target = 目标元素的 ID; startVal = 开始值; endVal = 结束值; decimals = 小数位数,默认值是0; duration = 动画延迟秒数,默认值是2; //用法: var options = { useEasing: true, useGrouping: true, separator: ',', decimal: '.', } var demo = new CountUp(target , startVal, endVal , decimals , duration , options); demo.start();
相关代码实例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"></div> <script src="https://cdn.bootcss.com/countup.js/1.9.3/countUp.js"></script> <script type="text/javascript"> var options = { useEasing: true, useGrouping: true, separator: ',', decimal: '.', }; var demo = new CountUp('box', 0, 4068, 0, 2.5, options); if (!demo.error) { demo.start(); } else { console.error(demo.error); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
CountUp.js实现数字滚动增值效果
数据改动的时候,countUp.js进行数值滚动增加的动态效果,供大家参考,具体内容如下 这是js文件 // target = id of html element or var of previously selected html element where counting occurs // startVal = the value you want to begin at // endVal = the value you want to arrive at // decimals =
-
countUp.js实现数字动态变化效果
本文实例为大家分享了countUp.js实现数字动态变化的具体代码,供大家参考,具体内容如下 countUp.js官网:演示地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字增长效果</title> </head> <body> <h1 id="num1&q
-
jquery轻量级数字动画插件countUp.js使用详解
CountUp.js是一个无依赖,轻量级的JavaScript"类",可用于快速创建以更有趣的方式显示数字数据的动画. 该JS插件下载地址 展示效果: 详细代码示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery轻量级数字动画插件</title> <!-- 该特效该引入的js插件 --> <
-
countUp.js实现数字滚动效果
本文实例为大家分享了countUp.js数字滚动效果展示的具体代码,供大家参考,具体内容如下 1. 概述 1.1 说明 在项目过程中,有时候需要动态的去展示一些数据的加载状态,如一个数字为10000,需要5秒时间滚动加载完成.此时使用countup.js就能够很方便的处理此类功能问题. 1.2 countup.js countup.js是一个无依赖性.轻量级的javascript类,可用于快速创建动画,以更有趣的方式显示数字/数据.详见countup.js 1.3 countup.js使用 np
-
countup.js实现数字动态叠加效果
本文实例为大家分享了countup.js实现数字动态叠加效果的具体代码,供大家参考,具体内容如下 CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 startVal 和 endVal 参数判断的. 再加上滚轮事件判断. 可配置的参数: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals
-
CountUp.js数字滚动插件使用方法详解
CountUp.js 是一个轻量级,无依赖的JavaScript类,通过简单的设置就可以达到数字滚动的效果 演示地址: countUp.js 可配置项: target = 目标元素的 ID: startVal = 开始值: endVal = 结束值: decimals = 小数位数,默认值是0: duration = 动画延迟秒数,默认值是2: //用法: var options = { useEasing: true, useGrouping: true, separator: ',', de
-
Vue.js数字输入框组件使用方法详解
本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
vue.js实现日历插件使用方法详解
今天要实现的功能就是以下这个功能:vue.js模拟日历插件 好了废话不多说了 直接上代码了 css: *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #app{ width: 1000px; margin: 10px auto; } .calender{ width: 1000px; } .calender table{
-
jquery.tableSort.js表格排序插件使用方法详解
本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &
-
TableSort.js表格排序插件使用方法详解
本文实例为大家分享了TableSort.js表格排序的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableSort</title> <style type="text/css"> table { bor
-
基于js对象,操作属性、方法详解
一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很
-
原生js封装的一些jquery方法(详解)
用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl
-
IDEA下使用MyBatisCodeHelper插件的方法详解
一:IDEA下使用MyBatisCodeHelper插件.(IDEA的版本 2018 2.5亲测可用) 1.1 IDEA安装MyBatisCodeHelper插件. MyBatisCodeHelper插件现在要付费了,有条件可以买激活码激活的,支持正版,这里演示安装硬盘下载的插件的方式来介绍安装. 下载链接: 链接: https://pan.baidu.com/s/1I-XlrPPVAuzsu9_XY0eEUQ 提取码: bqvn ,内含多个版本的.下载解压查看. Mybatis-Plugin
-
highlight.js 代码高亮插件的使用详解
在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择 勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j
-
D3.js实现折线图的方法详解
前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
随机推荐
- JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
- VBS读取注册表的两种方法
- java环境变量如何配置
- ASP.NET GridView中文本内容无法换行(自动换行/正常换行)
- asp错误的几种处理方式
- 实现前后端数据交互方法汇总
- 一个JS函数搞定网页标题(title)闪动效果
- jquery利用event.which方法获取键盘输入值的代码
- java中fastjson生成和解析json数据(序列化和反序列化数据)
- php实例分享之实现显示网站运行时间
- web站点崩溃的原因大全
- 浅谈HTTP使用BASIC认证的原理及实现方法
- Android中创建快捷方式代码实例
- Android RadioGroup 设置某一个选中或者不可选中的方法
- HTML在线编辑器的基本概念与相关资料第1/2页
- Ubuntu 下安装SQL Server教程
- Android Menu详解及示例代码
- vue+iview写个弹框的示例代码
- Vue 进入/离开动画效果
- Java源码解析ArrayList及ConcurrentModificationException