masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 基于SVG的里程表数字运动模糊特效插件

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

黄舟
Lepaskan： 2017-01-18 14:44:38
asal
1663 orang telah melayarinya

  下载插件

 (2)

简要教程

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

使用方法

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

<script type="text/javascript" src="js/odoo.js"></script>
Salin selepas log masuk

HTML结构

使用一个

作为里程表的容器。

<div class="js-odoo"></div>
Salin selepas log masuk

CSS样式

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

.js-odoo {
  font-size: 60px;
  font-family: Roboto;
  fill: #fff;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
Salin selepas log masuk

初始化插件

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

odoo.default({ el:&#39;.js-odoo&#39;,value:&#39;￥68,123,000&#39; })
Salin selepas log masuk

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

odoo.default({
  el: &#39;.js-odoo&#39;,
  value: &#39;£42,000,000&#39;,
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});
Salin selepas log masuk

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

const cancel = odoo.default({ el: &#39;.js-odoo&#39;, value: &#39;£42,000,000&#39; });
cancel();
Salin selepas log masuk

以上就是基于SVG的里程表数字运动模糊特效插件的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Label berkaitan：
SVG，运动模糊，里程表
sumber：php.cn
Artikel sebelumnya：炫酷HTML5 SVG文字变形动画特效 Artikel seterusnya：swiper的使用（一）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2206
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2358
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1973
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1857
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1922
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan