欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > jquery在指定时间之后更新数字动画插件

jquery在指定时间之后更新数字动画插件

jquery在指定时间之后更新数字动画插件

关键词:兼容ie8,数字动画,jquery数字动画,jquery数字动画插件,jquery数字增加动画,jquery数字递增动画,jquery数字动画效果,Roughly.js,jquery库,gongjulei

描述:Roughly.js是jquery在指定时间之后更新数字动画插件。该jquery数字动画插件可以在指定的日期之后,每隔指定的秒数增加指定的数字,数字增加时以动画的方式来展示。

简要教程

Roughly.js是jquery在指定时间之后更新数字动画插件。该jquery数字动画插件可以在指定的日期之后,每隔指定的秒数增加指定的数字,数字增加时以动画的方式来展示。

使用方法

在页面中引入jquery以及jquery.roughly.js文件。

<script src="jquery.min.js"></script>
<script src="jquery.roughly.js"></script>
                
HTML结构

可以直接通过为元素添加data-*属性的方式来使用该jquery数字动画插件。

<div class="roughly"
  data-start-date="January 1, 2015"
  data-start-count="100"
  data-wait-seconds="2"
  data-increase-by="5"></div>
                
初始化插件

如果没有指定data-*属性,可以通过roughly()方法来说初始化该插件。

<div id="example"></div>
<script>
    $("#example").roughly({waitSeconds: 5})
</script>               
                

你还可以通过下面的方法来设置全局参数。

<script>
  $.fn.roughly.defaults = {
    startDate: "January 1, 2015",
    prefix: "$"
  };
</script>                  
                

配置参数

该jquery数字动画插件的可用配置参数有:

startDate: "January 1, 1970", // start date for counter
startCount: 0, // starting number for counter
waitSeconds: 1, // number of seconds to wait between updates
increaseBy: 1, // number to increase by with each update
decimals: 0, // number of decimals to display
prefix: "", // add a prefix to the number
postfix: "" // add a postfix to the number                  
                
  • startDate:开始日期。
  • startCount:计数的初始值。
  • waitSeconds:等待多少秒后更新数字。
  • increaseBy:每次增加多少数值。
  • decimals:显示浮点数。
  • prefix:为数字添加一个前缀。
  • postfix:为数字添加一个后缀。

该jquery数字动画插件的github地址为:https://github.com/dahjson/roughly

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/7923.html

 在线演示  免费下载
编号:201802130000007923
大小:0.04MB
上传时间:2018-02-13 18:02
素材由用户"wxf626967"上传分享。

标签

最新推荐素材

与jquery在指定时间之后更新数字动画插件相关的素材

.