hall.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="../static/css/common.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/workshop.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/commonArea.css" />
    <script src="../static/js/jquery-1.8.1.min.js" type=text/javascript></script>
    <script src="../static/js/rem.js"></script>
    <title>上海市人民检察院</title>
</head>
<style type="text/css">
    .content {
        background: url('../static/images/bg.jpg') center center no-repeat;
        width: 100%;
        height: 100%;
        /*  background-position-x: center; */
        background-size: cover;
    }
</style>
<script type="text/javascript">
    var arr = [{
        top: '0.2rem',
        left: '3.2rem'
    }, {
        top: '0.33rem',
        left: '10.4rem'
    }, {
        top: '0.78rem',
        left: '0.3rem'
    }, {
        top: '4.39rem',
        left: '0.3rem'
    }, {
        top: '5.35rem',
        left: '0.3rem'
    }, {
        top: '6.68rem',
        left: '3.15rem'
    }, {
        top: '6.68rem',
        left: '10.4rem'
    }, {
        top: '4.37rem',
        left: '11.15rem'
    }]
    $(function() {
        // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
        $(".tab_list li").click(function() {
                // 链式编程  当前li添加类，其余兄弟移除类
                $(this).addClass('current').siblings().removeClass('current');
                // 2、拿到当前点击的索引号
                var index = $(this).index();
                // 3、下面index对应的模块显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            })
            //循环数组 打摄像头位置

        var divElement = document.querySelector('.room_box');
        console.log(divElement)
        let htmlTxt = '<img class="bg_img" src="../static/images/hall.jpg" alt="">'
        for (let i = 0; i < arr.length; i++) {
            console.log(divElement)
            htmlTxt = htmlTxt + '<img class="camera" src="../static/images/camera.png" ' + ' style=top:' + arr[i].top + ";left:" + arr[i].left + ' onclick="handleClick(' + i + ')"></img>'
                // 使用 innerHTML 添加元素

        }
        divElement.innerHTML = htmlTxt;
    });

    function handleClick(areaNumber) {

        alert("点击了区域 " + arr[areaNumber].top);
    }
</script>

<body>
    <div class="content">
        <div class="content_top"></div>
        <div class=" padding_box2 clearfix">
            <div class="menu_box">
                <div class="menu_title_box">礼堂</div>
                <div class="tab_list">
                    <ul>
                        <li class="current">
                            <a class="flex-box" href="./hall.html">
                                <p class="tabName">一楼</p>
                                <p class="monitor monitor2">监控点<span>28</span></p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="content_box">
                <div class="room_box">

                </div>
            </div>
        </div>
    </div>
</body>

</html>