JS生成图片热点

最新推荐文章于 2026-04-27 11:30:39 发布

原创

最新推荐文章于 2026-04-27 11:30:39 发布 · 1.6k 阅读

标签

#js #html #javascript #jquery

收录于

实现思路：
1、图片容器采用relative的定位方式。
2、监控鼠标左键按下动作。并时时记录和修改轨迹层div的大小。
3、鼠标抬起后记录鼠标移动的起始位置。生成图片热点区域。
效果如下：
在这里插入图片描述
输入节点名称后可以生产JSON对象

代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(document).ready(function () {

            ///最终保存数据
            var RequestData = {
                imageGuid: "", //流程_图片id
                hotspots: [
                    {
                        guid: "",
                        coordinate: "",//坐标点
                        describe: ""//锚点说明
                    }
                ]
            };
            var cc = function () {
                return {
                    guid: