Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../base.jsp"/>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/common.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/workshop.css"/>
<link rel="stylesheet" type="text/css" href="${ctx}/static/css/commonArea.css"/>
<script src="${ctx}/static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="${ctx}/static/js/rem.js"></script>
<title>礼堂</title>
</head>
<style type="text/css">
.content {
background: url('${ctx}/static/images/bg.jpg') center center no-repeat;
width: 100%;
height: 100%;
/* background-position-x: center; */
background-size: cover;
}
</style>
<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="#">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>9</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var arr = [
{
top: '0.2rem',
left: '3.2rem',
gbid: '31011700001320001326'
}, {
top: '0.33rem',
left: '10.4rem',
gbid: '31011700001320001327'
}, {
top: '0.78rem',
left: '0.3rem',
gbid: '31011700001320001330'
}, {
top: '4.39rem',
left: '0.3rem',
gbid: '31011700001320001331'
}, {
top: '5.35rem',
left: '0.3rem',
gbid: '31011700001320001333'
}, {
top: '6.68rem',
left: '3.15rem',
gbid: '31011700001320001328'
}, {
top: '6.68rem',
left: '10.4rem',
gbid: '31011700001320001329'
}, {
top: '4.37rem',
left: '11.15rem',
gbid: '31011700001320001334'
}, {
top: '7.25rem',
left: '6.5rem',
gbid: '31011700001320001334'
}
]
$(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("gbid " + arr[areaNumber].gbid);
}
</script>
</html>