求前端大佬解释一下该图中的标签是如何实现？

Question

如下如，图片上如何加这个相关商品卡片呢？
或者是我该搜索哪方面的内容？
求大佬解答一下

Answer 1

具体来说，这个功能的实现通常包括以下几个步骤：

1. 后端提供物品的信息和购买链接。这些信息通常以接口的形式提供给前端。
2. 前端根据接口返回的信息，在页面上展示物品，并在物品上添加一个按钮。
3. 当用户点击物品上的按钮时，前端会发送一个请求到后端，请求物品的详细信息和购买链接。
4. 后端根据请求返回物品的详细信息和购买链接。
5. 前端根据后端返回的信息，展示物品的详细信息和购买链接。

因此，这个点击按钮的坐标通常是由前端指定的。前端会在物品上添加一个透明的按钮，当用户点击这个按钮时，前端会通过代码判断用户点击的位置是否在按钮上，从而触发相应的操作。

Answer 2

图片搜索不是前端做的，你应该把鼠标点击的坐标和图片的ID发给后端搜索，标签是你在后端返回的结果然后你根据点击坐标去显示的。
至于偏移用transition。

Answer 3

其实很简单，大概逻辑：

1. 后段返回的数据里包含每个标签的位置和内容
2. 你生成标记点，使用绝对定位，改在图片上
3. 标记点被触及后，显示卡片

Answer 4

一般来说这样的标签，会在商品上传的时候让维护人员去点选一个坐标，然后存储在商品信息中，前端显示的时候就去把锚点放到对应的位置就行了。