• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

mhuggins/jquery-countTo: A jQuery plugin that will count up (or down) to a targe ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

mhuggins/jquery-countTo

开源软件地址:

https://github.com/mhuggins/jquery-countTo

开源编程语言:

JavaScript 57.6%

开源软件介绍:

jQuery countTo Plugin

jQuery countTo is a jQuery plugin that will count up (or down) to a target number at a specified speed, rendered within an HTML DOM element.

Requirements:

jQuery countTo requires the latest version of jQuery.

Usage:

There are two main approaches to using this plugin: through data attributes on DOM nodes, and through JS options explicitly passed to the countTo function.

These two methods can be mixed and matched as well. Data attributes takes precedence over JS options.

Data Attributes

This approach allows you to define data-* attributes on whatever DOM element will act as a container for your counter. This is useful when you already know the values at the time that you are constructing the DOM.

<span class="timer" data-from="25" data-to="75"></span>

<script type="text/javascript">
  $('.timer').countTo();
</script>

A more detailed example that demonstrates all possible options being used is as follows.

<span class="timer" data-from="0" data-to="100"
      data-speed="5000" data-refresh-interval="50"></span>

<script type="text/javascript">
  $('.timer').countTo();
</script>

Refer to the Options section below for more info on the various options available.

JavaScript Options

This approach allows you to pass values to the countTo function. This is useful when you don't know the values at the time the DOM is being rendered.

<span class="timer"></span>

<script type="text/javascript">
  $('.timer').countTo({from: 0, to: 500});
</script>

A more detailed example that demonstrates all possible options being used is as follows.

<span class="timer"></span>

<script type="text/javascript">
  $('.timer').countTo({
    from: 50,
    to: 2500,
    speed: 1000,
    refreshInterval: 50,
    formatter: function (value, options) {
      return value.toFixed(options.decimals);
    },
    onUpdate: function (value) {
      console.debug(this);
    },
    onComplete: function (value) {
      console.debug(this);
    }
  });
</script>

Refer to the Options section below for more info on the various options available.

Options:

A complete listing of the options that can be passed to the countTo method is below.

Option Data Attribute Description
from data-from The number to start counting from. (default: 0)
to data-to The number to stop counting at. (default: 100)
speed data-speed The number of milliseconds it should take to finish counting. (default: 1000)
refreshInterval data-refresh-interval The number of milliseconds to wait between refreshing the counter. (default: 100)
decimals data-decimals The number of decimal places to show when using the default formatter. (default: 0)
formatter (value, options) A handler that is used to format the current value before rendering to the DOM. The true current value and options set is passed to the function, and it is run in the context of the DOM element. It must return the formatted value. (default: value.toFixed(options.decimals))
onUpdate (value) A callback function that is triggered for every iteration that the counter updates. The currently rendered value is passed to the function, and it is called in the context of the DOM element. (default: null)
onComplete (value) A callback function that is triggered when counting finishes. The final rendered value is passed to the function, and it is called in the context of the DOM element. (default: null)

Functions:

This plugin also supports functions, primarily for changing state. Functions are called by passing the name as a string to the countTo jQuery function, e.g.: $('#timer').countTo('stop').

start Resumes the timer if it is stopped.
stop Stops (pauses) the timer if it is running.
toggle Starts or stops the timer based upon its current state.
restart Restarts the timer at its initial "from" value.

Created By:

Matt Huggins

License:

jQuery-countTo is released under the MIT license.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap