Useful number scrolling plugin

Add-ons

2026-07-25 22:58 3 次浏览 • 0 次下载 2.3KB

Plugin description: Simple, flexible, and easy to use. It does not depend on other libraries. The JavaScript is written in ES6. Chrome is recommended for viewing. You can use Babel to convert it to ES5, or convert it online through the Babel website. Animations use CSS3.

The following shows how to call the API.

var odo1 = new Odometer('.Odometer',{
    len : null, // Set the default number of digits
    num : "", // Initial value
    speed : 1000, // Animation speed
    symbol : '', // Separator
    dot : 0 // Number of decimal places to retain 
});
odo1.update(123)  // Update the number

The following is the basic CSS.

.number-animate{line-height:45px; height: 45px;font-size: 40px;overflow: hidden; display: inline-block; position: relative; }
.number-animate .number-animate-dot{ width: 21px; float: left; text-align: center;}
.number-animate .number-animate-dom{ width: 27px;  text-align: center; float: left; position: relative; top: 0;}
.number-animate .number-animate-dom span,.number-animate .number-animate-dot span{float: left;width: 100%;height: 45px;line-height: 1;}