98彩票网-如何为您的网站创建平滑的数字转换

作者:98彩票 时间:2019-04-22 12:39

字号

使数字信息呈现更有趣的一种有效方法98彩票添加过渡动画创建过渡动画可以使用javascript完成,但编码需要很长时间。如需更快的替代方案,请尝试里程表

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

履行

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

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

你完成了!现在,您使用odometer该类包装的任何元素都将转换为里程表。

在这个例子中,我正在使用类似汽车的里程表主题。里程表有六个不同的主题,即默认主题,数字,最小,广场,老虎机和火车站主题。您可以访问演示页面以查看它们的运行情况。

要更新该值,您可以使用本机javascript或jQuery代码。首先,98彩票调用该setTimeout函数,然后定义更新的值,如下面的代码片段所示:

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

或者你可以像这样使用jQuery表单:

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

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

然后,将odometer添加到您想要的任何元素,例如:

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

然后将3252的值更改为5555(如前所述)并进行冷却转换。

演示结果

选项

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

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

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

1
2
3
4
6
7
8
9
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.
};

结论

对于那些经常提供98彩票数字信息并希望让它更引人注目的人来说,里程表是一个不错的选择。请注意,如果您输入的数字不是数字,插件将无效无论如何,请尝试一下,让我们知道您的想法!

责任编辑:admin新闻报料:400-888-8888   本站原创,未经授权不得转载
关键词 >> 98彩票
继续阅读
热新闻

APP下载

客户端下载
推荐
关于我们 诚聘精英 联系我们 版权声明 友情链接 报料