如何为您的站点创建平滑数字过渡

其中一个有效的方法做一个演示通过添加过渡动画的数字信息更有趣的是。可以使用javascript完成创建过渡动画的过程，但是编码会花费很长时间。如需更快速的选择，请尝试使用里程表。

里程表是一个JavaScript插件 ，可帮助您通过平滑过渡和酷炫主题使数字信息更具吸引力 。它易于设置，并且在许多当前的浏览器中都受支持。

实作

里程表是一个独立的javascript插件 。您只需使用以下代码在页面中包含js文件及其主题：

<link rel="stylesheet" href="odometer-theme-car.css" />
<script type="text/javascript" src="odometer.js"></script>

你完成了！现在，用odometer类包装的任何元素都将转换为里程表。

在此示例中，我使用了类似汽车的里程表主题。里程表还具有其他六个不同的主题，即默认主题，数字主题，最小主题，广场，老虎机和火车站主题。您可以转到演示页面以查看它们的运行情况。

要更新值，可以使用本机javascript或jQuery代码。首先，调用setTimeout函数，然后定义更新的值，如以下代码片段所示：

<script>
  setTimeout(function(){
    odometer.innerHTML = 5555;
  }, 1000);
</script>

或者，您可以像这样使用jQuery形式：

setTimeout(function(){
  $('.odometer').html(5555);
}, 1000);

代码中的值1000表示更新过程将在页面完全加载后一秒钟执行。

然后，将odometer类添加到所需的任何元素，例如：

<p class="odometer">3252</p>

然后将3252的值更改为5555（如先前定义），并进行一个很酷的过渡。

选件

对于更高级的功能，里程表为您提供了一些自定义选项。当默认设置不适合您时，此功能很有用。为了能够设置选项，首先要创建一个odometerOptions对象，如下所示：

<script>
window.odometerOptions = {
  format: '(ddd).dd'
};
</script>

format选项将影响数字格式设置规则，例如在某些数字前显示小数点。 (ddd)表示数字中没有小数点。对于其他选项，请查看以下列表：

window.odometerOptions = {
  auto: false, // Don't automatically initialize everything with class 'odometer'
  selector: '.my-numbers', // Change the selector used to automatically find things to be animated
  format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
  duration: 3000, // Change how long the javascript expects the CSS animation to take
  theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
  animation: 'count' // Count is a simpler animation method which just increments the value,
                     // use it when you're looking for something more subtle.
};

结论

对于那些经常显示数字信息并希望使其更加醒目的人，里程表是一个不错的选择。请注意， 如果您输入数字以外的任何内容，则该插件将无效 。无论如何，请尝试一下，让我们知道您的想法！

翻译自: https://www.hongkiat.com/blog/number-transitioning-odometer/

如何为您的站点创建平滑数字过渡

实作

选件

结论

相关推荐