首页 > web前端 > html教程 > 基于SVG的里程表数字运动模糊特效插件

基于SVG的里程表数字运动模糊特效插件

黄舟
发布: 2017-01-18 14:44:38
原创
1669 人浏览过

  下载插件

 (2)

简要教程

odoo.js是一款基于HTML5 SVG的里程表数字运动模糊特效插件。该插件用于模拟里程表的数字快速翻转时的效果。它使用简单,数字翻动时带运动模糊效果,非常的炫酷。

使用方法

在页面中引入odoo.js文件。

<script type="text/javascript" src="js/odoo.js"></script>
登录后复制

HTML结构

使用一个

作为里程表的容器。

<div class="js-odoo"></div>
登录后复制

CSS样式

你可以自定义数字的字体和颜色等属性。

.js-odoo {
  font-size: 60px;
  font-family: Roboto;
  fill: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
登录后复制

初始化插件

可以通过下面的方法来初始化odoo.js插件。

odoo.default({ el:&#39;.js-odoo&#39;,value:&#39;¥68,123,000&#39; })
登录后复制

也可以在初始化时修改它默认的配置参数。

odoo.default({
  el: &#39;.js-odoo&#39;,
  value: &#39;£42,000,000&#39;,
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});
登录后复制

如果要取消里程表动画,可以调用cancel()方法。

const cancel = odoo.default({ el: &#39;.js-odoo&#39;, value: &#39;£42,000,000&#39; });
cancel();
登录后复制

以上就是基于SVG的里程表数字运动模糊特效插件的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板