MottoJS,一个让你的“座右铭”更好玩的JS插件

项目地址:https://github.com/jrainlau/m...
体验地址:https://jrainlau.github.io/mo...
Codepen: Codepen

最新更新:1.0.1版本加入了“抖动特效”,类似信号被干扰的样子,欢迎品尝~

七夕快到了,我不会告诉你这是一个告白神器……写一封长长的告白信,把config里面的时间设置得长一些,然后默默地把它发给你的心上人……

介绍

MottoJS是一个只有4kb(.min文件只有2kb)的JS插件,绿色无依赖。通过MottoJS可以用一个很酷炫的方式展示你的座右铭。
图片描述

安装

npm

npm install motto

or

git clone git@github.com:jrainlau/motto.git

使用

编写一个html标签,比如<h1></h1>或其他

<h1 class="motto"></h1>

然后引入MottoJS

<script src="motto.min.js"></script>

MottoJS同时支持以AMD, CommonJSES2015的方式引入。

然后使用new操作符去生成一个MottoJS实例

var motto = new Motto(el, config)

参数

MottoJS接受两个参数。

  • el {String / HTML element} 必须
    使用CSS选择器去选择一个用于展示你的座右铭的html元素。

  • config {Object} 必须
    一个带有5个属性的用于配置MottoJS的对象。

配置

基本的配置对象如下:

{
    lyric: 'To be or not to be, that\'s a question.',
    showUpSpeed: 1000,
    flashSpeed: 100,
    flashTimeout: 1000,
    callback: function() { ... }
}
  • lyric {String} 可选 默认值: ''
    你的座右铭内容。

  • showUpSpeed {Number} 可选 默认值: 0
    你的座右铭将会一个字一个字地出现,这个选项用于设置它们出现的间隔时间。

  • flashSpeed {Number} 可选 默认值: 0
    控制你的座右铭从乱码转化成有意义的句子的时间。

  • flashTimeout {Number} 可选 默认值: 0
    设置从座右铭完全输出到乱码转换之间的过渡时间。

  • callback {Function} 可选 默认值: {}
    乱码转换完成后的回调函数。

证书

MIT


感谢你的阅读。我是Jrain,欢迎关注我的专栏,将不定期分享自己的学习体验,开发心得,搬运墙外的干货。下次见啦!


Jrain-前端玩具盆
记录一路以来的各种折腾。

Hiphop dancer,

12.9k 声望
11.6k 粉丝
0 条评论
推荐阅读
浅谈组件库和 SVG 图标库的解耦维护思路
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于...

jrainlau1阅读 2k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.2k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

Hiphop dancer,

12.9k 声望
11.6k 粉丝
宣传栏