How do I use the plug-in digital scroll plugin numberanimate.js?

Source: Internet
Author: User
Tags time interval
This article brings you the content is about how to use the plug-in digital scrolling plugin numberanimate.js? Have a certain reference value, the need for friends can refer to, I hope to help you.

There is a need to achieve digital scrolling, thinking that there are a lot of this effect of the plug-in, do not build their own wheels, so, find a numberanimate JS digital rolling plug-in, very easy to use, very simple, just meet the needs.

The code is as follows:

<! DOCTYPE html>

Want the effect is over a period of time plus 1 effect, can be achieved, but there is a small bug , that is, for example, a single digit added to 9 o'clock and then the bit is 0, the problem comes, here 0 of the number is not rolling out, directly to the next time interval scroll to 11, debugging a long period to find, is numberAnimate.js, the 85th line of the judging condition has a problem, comment out the If judgment is good, such as:

, the 85th line $(this).css("top") has always been 0px , and the 84th row calculated to get to the value of the thisTop number rolled to 0 o'clock, so the result is 0px directly skipped the judgment, did not perform to the transform animation there, so less 0 effect, resulting in the appearance of the effect is 9 jump directly to 11, Not 10.

In addition, the hint, change the size of the number of the font, need to modify the numberAnimate.css height、width、字号 proportion to grasp good, accidentally on the bad, personally experience-_-| |

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.