Hot-spot.min.js 是一个基于原生 JavaScript 的小型插件，用于在网页上添加热点弹框，常常用于网站引导、教育和说明。本文将介绍如何在前端项目中使用这个有用的 npm 包。
安装
首先，我们需要通过 npm 安装 hot-spot.min.js 包。在终端中输入下列命令即可完成安装：
npm install hot-spot.min.js
现在我们可以在项目中使用这个包了。
获取素材
在使用 hot-spot.min.js 之前，我们需要先准备好以下素材：
- 图片：作为热点区域触发器的图片
- 连接：作为热点区域的内容
- 坐标：热点触发器在图片中的坐标位置
使用
使用 hot-spot.min.js 很简单，只需将它添加到 HTML 文件和 JS 文件中，然后按照示例代码设置即可。
HTML 文件
首先，在 HTML 文件中添加一个包裹着图片和热点区域的 div 容器：
<div id="hot-spots-container"> <img src="./image.jpg" /> </div>
JS 文件
在 JS 文件中，你需要先引入 hot-spot.min.js，然后创建一个 hotSpot 实例，并将其添加到容器中。
-- -------------------- ---- -------
------ ------- ---- ------------------
----- --------- - -----------------------------------------------
----- --------------- - --- ---------
----------
--------- -
-
------ -----
------------ -------
--------- - -- --- -- -- --
--
--
---
-----------------------选项
hotSpot 类有以下选项：
container: 容器元素，必选。hotSpots: 热点数据，必选。offset: 热点内容和容器的距离，默认为 10。
热点对象有以下属性：
title: 热点的标题，必选。description: 热点的描述内容，必选。position: 热点的坐标，必选。
示例代码
下面是一个完整的代码示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-------------- ------------
-------
-------------------- --- -
---------- -----
-
--------
-------
------
---- -------------------------
---- ----------------- --
------
------- ----------------------------------------------
--------
----- --------- - -----------------------------------------------
----- -------- - -
-
------ -------------
------------ ---------------------------------------
--------- - -- --- -- -- --
--
-
------ -------
------------ ----- -------------------------------------
--------- - -- --- -- -- --
--
-
------ ------
------------ ---- ------- ---- - --- ---------------------------------------------
--------- - -- --- -- -- --
--
--
----- --------------- - --- ---------
----------
---------
---
-----------------------
---------
-------
-------结论
hot-spot.min.js 是一个方便、实用的 npm 包，它可以轻松地给网站添加热点弹窗，帮助网站引导和教育用户。使用该包前，需要准备好图片和坐标等素材，在 HTML 和 JS 文件中设置相应选项即可。为了让阅读更通顺，请移步该文章内带有例图的版本 ^_^
引用
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244c28