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

  下载插件

 (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:'.js-odoo',value:'￥68,123,000' })

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

odoo.default({
  el: '.js-odoo',
  value: '£42,000,000',
  lineHeight: 1.35,
  letterSpacing: 1,
  animationDelay: 100,
  letterAnimationDelay: 100
});

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

const cancel = odoo.default({ el: '.js-odoo', value: '£42,000,000' });
cancel();

以上就是基于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

• 从零开始打造自己的PHP框架的视频资料
  2023-03-15 16:54:01
• PHPMailer如何利用QQ邮箱完成邮件发送功能的实例分析
  2023-03-15 12:26:02
• php中关于IMAP如何收取邮件的方法介绍
  2023-03-14 18:58:01
• php如何快速实现数组去重的实例
  2023-03-14 11:30:01
• html中关于<a>标签的全部属性的使用总结
  1970-01-01 08:00:00
• php基础知识总结（新手入门必备）
  2023-03-16 15:20:01
• JavaScript中typeof的使用方法介绍
  1970-01-01 08:00:00
• JavaScript中confirm()方法的使用介绍
  1970-01-01 08:00:00
• HTML5 Placeholder属性的详情介绍
  1970-01-01 08:00:00
• ReactJS中表单的单选多选与反选的实现方法
  1970-01-01 08:00:00

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

2

1862

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

10

2030

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

1707

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

1609

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1622

Topik-topik yang berkaitan

Lagi>

• Bagaimana untuk menjadi halimunan dalam talian di TikTok
• Kaedah pembaikan ralat Kernelutil.dll
• Perbezaan antara injektif dan surjektif
• Apakah perisian dreamweaver?
• Bagaimana untuk menetapkan gaya titik cad
• Bagaimana untuk membeli dan menjual Bitcoin di Huobi.com
• Bagaimana untuk mempercepatkan halaman web
• Perbezaan antara halaman web statik dan halaman web dinamik