简介
"malzahar" 是一个用于前端开发的 npm 包，它可以帮助你在网页中创建类似于视频游戏中的技能栏，并且集成了一些基本的技能效果。该包的核心代码基于 jQuery 和 CSS3 实现，不需要使用 Canvas 或 WebGL。
安装
你可以在任何支持 npm 的终端中安装这个包，只需要运行以下命令即可：
npm install malzahar --save
在安装完毕后，你可以在你的项目中通过以下方式引入该包：
import 'malzahar';
或者在 HTML 文件中添加以下代码：
<link rel="stylesheet" type="text/css" href="node_modules/malzahar/dist/malzahar.css"> <script src="node_modules/malzahar/dist/malzahar.min.js"></script>
使用
在引入该包后，你可以在你的代码中使用以下方法来创建技能栏。
基本用法
$('#skills').malzahar({
skills: [
{ title: '技能一', icon: 'skill-1.png', description: '这是技能一的描述' },
{ title: '技能二', icon: 'skill-2.png', description: '这是技能二的描述' },
{ title: '技能三', icon: 'skill-3.png', description: '这是技能三的描述' },
{ title: '技能四', icon: 'skill-4.png', description: '这是技能四的描述' }
]
});在以上代码中，"$('#skills')" 是一个 jQuery 对象，它可以是任何包含技能栏的元素；"skills" 是一个数组，它包含了你要添加的所有技能，每个技能都是一个对象，包含以下属性：
- "title"：技能的名称；
- "icon"：技能的图标；
- "description"：技能的描述。
更多选项
"malzahar" 还支持一些额外的选项，可以用于控制技能栏的外观和功能。以下是一些常用选项的示例：
-- -------------------- ---- -------
-----------------------
------- ------
---------- -- -- ------
-------------- ----------- -- ----------
-------------- ----------- -- ----------
------------- ----- -- ----------
-------------- --------------- -
----------------------- - - --------
-- -- -----------
----------- --------------- --- -
-- --------------------
-------------- ---------------------------
- -- -----------
---总结
"malzahar" 是一个非常方便的工具，可以帮助你快速地创建一个酷炫的技能栏，并且与其他前端库兼容。如果你是一个喜欢创意的前端开发者，这个包一定不容错过！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d0d81e8991b448daa16