企业官网建设流程全解析

PbootCMS 热区功能说明文档

功能介绍

热区功能允许在幻灯片图片上添加交互式热点标记，可用于突出显示图片中的重要区域或添加链接。

特性

• 支持多个热点标记
• 可自定义热点颜色
• 可自定义热点透明度
• 支持热点链接
• 响应式布局，自动适应不同屏幕尺寸
• 动画效果增强用户体验

使用方法

1. 后台配置

1. 进入后台幻灯片管理
2. 选择或添加幻灯片
3. 点击"添加热区"按钮
4. 在图片上点击需要添加热区的位置
5. 设置热区属性：

• 颜色（默认：#378f34）
• 透明度（默认：0.8，范围0-1）
• 链接（可选）

6. 保存设置

2. 前端模板使用

在模板中使用以下标签显示热区：

{pboot:hotspots id="[slide:id]"}<divclass="absolute"style="left:[hotspots:x]%;top:[hotspots:y]%;"><ahref="[hotspots:link]"class="group relative block"><divclass="w-[80px] h-[80px] relative cursor-pointer"><!-- 外层扩散动画 --><divclass="absolute inset-0 rounded-full animate-ping"style="background-color:[hotspots:color];opacity:calc([hotspots:opacity] * 0.3)"></div><!-- 中层光晕 --><divclass="absolute inset-[10%] rounded-full"style="background-color:[hotspots:color];opacity:calc([hotspots:opacity] * 0.5)"></div><!-- 内层圆点 --><divclass="absolute inset-[30%] rounded-full shadow-lg"style="background-color:[hotspots:color];opacity:[hotspots:opacity]"></div></div></a></div>{/pboot:hotspots}

3. 可用标签

• [hotspots:x]- 热区横向位置（百分比）
• [hotspots:y]- 热区纵向位置（百分比）
• [hotspots:link]- 热区链接
• [hotspots:color]- 热区颜色（包含#号）
• [hotspots:opacity]- 热区透明度（0-1之间的小数）

数据格式

热区数据以JSON数组形式存储，示例：

[{"x":160,"y":166,"link":"/?product_7/118.html","color":"#ff0000","opacity":0.3832589285714285}]

默认值

• x: 0
• y: 0
• link: “”
• color: “#378f34”
• opacity: 0.8

注意事项

1. 热区位置使用百分比定位，确保在不同尺寸下正常显示
2. 建议图片尺寸保持一致，推荐比例16:9
3. 热区颜色代码需要包含#号
4. 链接可以为空，此时热区仅作为标记使用
5. 透明度值范围为0-1，0表示完全透明，1表示完全不透明

更新记录

v1.1.0 (2024-01-17)

• 添加透明度控制功能
• 优化动画效果
• 修复颜色代码格式问题
• 更新文档说明

v1.0.0 (2024-01-08)

• 初始版本发布
• 支持基础热区功能
• 添加动画效果
• 修复会话状态问题
• 优化数据解析逻辑