[发明专利]一种图片添加展示内容并随图片位移的方法

说明书

本发明公开了一种图片添加展示内容并随图片位移的方法，包括：应用于前端应用中图片时在任意位置添加展示内容对图片固定区域进行注释，并且展示内容可随图片位移的方法，此方法使前端应用拥有了更强的交互性，为图片展示提供了更多元的展示方法。此方法应用于各种展示类前端应用，使用ajax方法通过HTTP请求加载平台端的远程数据，使用localStorage存取展示内容及样式，动态比对图片及localStorage存储的注释内容来显示相应的展示内容，通过控制注释位置及图片的相对位置实现展示内容随图片进行位移。此方法可实现操作人自主选择展示样式及展示内容，可在图片任意位置添加展示内容对图片固定区域进行注释，同时展示内容可跟随图片切换及滑动。

技术领域

本发明涉及图片展示领域，特别是涉及一种图片添加展示内容并随图片位移的方法。

背景技术

随着银行网点、保险门店等场景需要，前端应用需要更强的交互性来满足人们的要求，平时我们所见到的图片展示内容有限，无法对某区域进行注释说明，或进行注释说明后该区域无法随图片展示方式进行位移。因此我们需要一种应用于图片任意位置添加展示内容并随图片位移的方法来扩展图片展示内容增强交互性。

发明内容

本发明主要解决的技术问题是提供一种图片添加展示内容并随图片位移的方法，可灵活增删展示内容，展示内容可扩展性强并且可随图片位移。

为解决上述技术问题，本发明采用的一个技术方案是：提供一种图片添加展示内容并随图片位移的方法，该包括以下步骤：

步骤100，应用启动后，点击配置窗口按钮后输入口令；

步骤101，校验结果，判断口令是否正确，通过则跳转应用配置界面，失败则重新输入；

步骤102，在系统配置界面点击增加注释按钮；

步骤103，步骤102成功后，根据图片展示区域的不同，选择不同注释样式，同时通过HTTP请求加载管理平台的远程数据；

步骤104，步骤103成功后，管理平台根据已配置好的产品注释内容名称进行返回，供用户选择注释内容；

步骤105，步骤104检测并返回注释内容后，用户可根据需要选择注释内容；

步骤106，拖动注释框至图片需要注释的位置；

步骤107，确定注释样式及内容无误后点击确认按钮锁定注释位置，点击取消按钮则返回应用配置界面；

步骤108，步骤107点击确定后在每次展示内容切换时，将动态比对图片及localStorage存储的注释内容来判断是否显示相应的展示内容；

步骤109，点击注释区域，在管理平台获取URL，同时管理平台返回弹窗的展示内容跳转至步骤110；

步骤110，新窗口进行注释的展示，点击可关闭可隐藏注释窗口，如需查看可再次执行步骤109。

进一步，该方法基于前端应用开发，开发语言为标准JavaScript语言。

进一步，所述管理平台通过socket连接方式与设备对接。

进一步，所述localStorage存储添加的展示内容、样式、相对位置、展示内容及样式。

本发明的有益效果是：本发明能够实现操作人自主选择展示样式及展示内容，可在图片任意位置添加展示内容对图片固定区域进行注释，同时展示内容可跟随图片切换及滑动。

附图说明

图1是本发明一种图片添加展示内容并随图片位移的方法一较佳实施例的流程图。

具体实施方式