Skip to content

J
jianchayuan
Commit c815dc78 authored by liuqing's avatar liuqing
Browse files
Options

新收犯

parent 27dc8e29
Hide whitespace changes
Inline Side-by-side
Showing with 2452 additions and 0 deletions
newshofan/eightjianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '1.4rem',
left: '1.05rem',
},{
top: '1.4rem',
left: '4.5rem',
},{
top: '1.4rem',
left: '9.2rem',
},{
top: '6.9rem',
left: '5.85rem',
},{
top: '4.45rem',
left: '1.45rem',
},{
top: '4.73rem',
left: '6.2rem',
},{
top: '6.2rem',
left: '2.3rem',
},{
top: '6.2rem',
left: '2.3rem',
},{
top: '5rem',
left: '10.37rem',
},]
$(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/new_eight.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>8</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>10</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/eightjianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '1.65rem',
left: '1.4rem',
},{
top: '4.4rem',
left: '1.4rem',
},{
top: '1.35rem',
left: '6.25rem',
},{
top: '1.35rem',
left: '10.6rem',
},{
top: '3rem',
left: '3.05rem',
},{
top: '3rem',
left: '8.4rem',
},{
top: '3rem',
left: '5.75rem',
},{
top: '5.45rem',
left: '5.75rem',
},{
top: '6.2rem',
left: '2.3rem',
},{
top: '6.2rem',
left: '2.3rem',
},{
top: '4.73rem',
left: '10.6rem',
},]
$(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/new_eight_two.png" 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>
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>8</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>10</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/fivejianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '5.58rem',
left: '8.15rem',
},{
top: '3rem',
left: '5.85rem',
},{
top: '3rem',
left: '2.8rem',
},{
top: '3rem',
left: '8.9rem',
}]
$(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/new_five.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>4</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>12</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/fivejianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '1.1rem',
left: '0.35rem',
},{
top: '1.1rem',
left: '9rem',
},{
top: '0.5rem',
left: '5.85rem',
},{
top: '2.8rem',
left: '5.85rem',
},{
top: '3rem',
left: '11.35rem',
},{
top: '5.05rem',
left: '9.3rem',
},{
top: '6.7rem',
left: '2.7rem',
},{
top: '6.55rem',
left: '6.6rem',
},{
top: '5rem',
left: '6.6rem',
},{
top: '3.5rem',
left: '6.6rem',
},{
top: '2.4rem',
left: '7.54rem',
},{
top: '4.25rem',
left: '5.2rem',
}]
$(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/new_five_two.png" 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 >
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>4</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>12</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/fourjianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '3.1rem',
},{
top: '0.1rem',
left: '5.48rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.65rem',
left: '5.48rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_1.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/fourjianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '2.3rem',
},{
top: '6.3rem',
left: '4.25rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_2.png" 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>
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/ninejianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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.35rem',
left: '0.3rem',
},
{
top: '0.92rem',
left: '1.15rem',
},
{
top: '0.92rem',
left: '1.78rem',
}, {
top: '0.92rem',
left: '1.78rem',
}, {
top: '0.92rem',
left: '2.4rem',
}, {
top: '0.92rem',
left: '3.05rem',
}, {
top: '0.92rem',
left: '3.68rem',
}, {
top: '0.92rem',
left: '4.3rem',
}, {
top: '0.92rem',
left: '4.9rem',
},{
top: '0.92rem',
left: '5.55rem',
},{
top: '0.92rem',
left: '6.15rem',
},{
top: '0.92rem',
left: '6.8rem',
},{
top: '0.92rem',
left: '7.4rem',
},{
top: '0.92rem',
left: '8.05rem',
},{
top: '0.92rem',
left: '8.7rem',
},{
top: '0.92rem',
left: '9.3rem',
},{
top: '0.92rem',
left: '9.93rem',
},{
top: '0.92rem',
left: '10.55rem',
}, {
top: '1.4rem',
left: '1.15rem',
},
{
top: '1.4rem',
left: '1.78rem',
}, {
top: '1.4rem',
left: '1.78rem',
}, {
top: '1.4rem',
left: '2.4rem',
}, {
top: '1.4rem',
left: '3.05rem',
}, {
top: '1.4rem',
left: '3.68rem',
}, {
top: '1.4rem',
left: '4.3rem',
}, {
top: '1.4rem',
left: '4.9rem',
},{
top: '1.4rem',
left: '5.55rem',
},{
top: '1.4rem',
left: '6.15rem',
},{
top: '1.4rem',
left: '6.8rem',
},{
top: '1.4rem',
left: '7.4rem',
},{
top: '1.4rem',
left: '8.05rem',
},{
top: '1.4rem',
left: '8.7rem',
},{
top: '1.4rem',
left: '9.3rem',
},{
top: '1.4rem',
left: '9.93rem',
},{
top: '1.4rem',
left: '10.55rem',
},{
top: '2.4rem',
left: '1.15rem',
},
{
top: '2.4rem',
left: '1.78rem',
}, {
top: '2.4rem',
left: '1.78rem',
}, {
top: '2.4rem',
left: '2.4rem',
}, {
top: '2.4rem',
left: '3.05rem',
}, {
top: '2.4rem',
left: '3.68rem',
}, {
top: '2.4rem',
left: '4.3rem',
}, {
top: '2.4rem',
left: '4.9rem',
},{
top: '2.4rem',
left: '5.55rem',
},{
top: '2.4rem',
left: '6.15rem',
},{
top: '2.4rem',
left: '6.8rem',
},{
top: '2.4rem',
left: '7.4rem',
},{
top: '2.4rem',
left: '8.05rem',
},{
top: '2.4rem',
left: '8.7rem',
},{
top: '2.4rem',
left: '9.3rem',
},{
top: '2.4rem',
left: '9.93rem',
},{
top: '2.4rem',
left: '10.55rem',
}, {
top: '2.9rem',
left: '1.15rem',
},
{
top: '2.9rem',
left: '1.78rem',
}, {
top: '2.9rem',
left: '1.78rem',
}, {
top: '2.9rem',
left: '2.4rem',
}, {
top: '2.9rem',
left: '3.05rem',
}, {
top: '2.9rem',
left: '3.68rem',
}, {
top: '2.9rem',
left: '4.3rem',
}, {
top: '2.9rem',
left: '4.9rem',
},{
top: '2.9rem',
left: '5.55rem',
},{
top: '2.9rem',
left: '6.15rem',
},{
top: '2.9rem',
left: '6.8rem',
},{
top: '2.9rem',
left: '7.4rem',
},{
top: '2.9rem',
left: '8.05rem',
},{
top: '2.9rem',
left: '8.7rem',
},{
top: '2.9rem',
left: '9.3rem',
},{
top: '2.9rem',
left: '9.93rem',
},{
top: '2.9rem',
left: '10.55rem',
}
,{
top: '4.7rem',
left: '1.45rem',
},{
top: '4.7rem',
left: '2.7rem',
},{
top: '4.7rem',
left: '3.95rem',
},{
top: '4.7rem',
left: '5.2rem',
},{
top: '4.73rem',
left: '6.5rem',
},{
top: '5.35rem',
left: '7.75rem',
},{
top: '5.35rem',
left: '9rem',
},{
top: '5.35rem',
left: '10.25rem',
},{
top: '4.05rem',
left: '3.95rem',
},{
top: '4.05rem',
left: '10.88rem',
},{
top: '6rem',
left: '0.85rem',
},{
top: '6rem',
left: '3.95rem',
},{
top: '7.03rem',
left: '3.1rem',
},{
top: '7.6rem',
left: '6.8rem',
},{
top: '7.03rem',
left: '3.1rem',
},{
top: '7.03rem',
left: '3.1rem',
},{
top: '7.3rem',
left: '0.85rem',
},{
top: '7.45rem',
left: '11.23rem',
},]
$(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/new_nine.png" 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="./onelou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>80</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/onejianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '3.1rem',
},{
top: '0.1rem',
left: '5.48rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.65rem',
left: '5.48rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_1.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/onejianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '2.3rem',
},{
top: '6.3rem',
left: '4.25rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_2.png" 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>
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/sevenjianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '5.58rem',
left: '8.15rem',
},{
top: '3rem',
left: '5.85rem',
},{
top: '0.4rem',
left: '0.35rem',
}]
$(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/new_five.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>3</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>5</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/sevenjianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '5.58rem',
left: '8.15rem',
},{
top: '3rem',
left: '5.85rem',
},{
top: '3rem',
left: '8.9rem',
},{
top: '0.4rem',
left: '0.35rem',
},{
top: '6.6rem',
left: '0.35rem',
}]
$(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/new_five.png" 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 >
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>3</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>5</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/threejianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '3.1rem',
},{
top: '0.1rem',
left: '5.48rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.65rem',
left: '5.48rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_1.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/threejianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '2.3rem',
},{
top: '6.3rem',
left: '4.25rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_2.png" 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>
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/twojianqu/onelou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '3.1rem',
},{
top: '0.1rem',
left: '5.48rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.65rem',
left: '5.48rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_1.png" 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="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li>
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
newshofan/twojianqu/twolou.html 0 → 100644
View file @ c815dc78
<!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: '3.9rem',
left: '0.33rem',
},{
top: '3.9rem',
left: '5.05rem',
},{
top: '3.9rem',
left: '5.85rem',
},{
top: '3.9rem',
left: '5.45rem',
},{
top: '3.9rem',
left: '11.3rem',
},{
top: '2.1rem',
left: '3.1rem',
},{
top: '6rem',
left: '2.3rem',
},{
top: '6.3rem',
left: '4.25rem',
},{
top: '0.35rem',
left: '6.1rem',
},{
top: '0.35rem',
left: '7.2rem',
},{
top: '0.35rem',
left: '8.35rem',
},{
top: '0.35rem',
left: '9.5rem',
},{
top: '0.35rem',
left: '10.65rem',
},{
top: '2.1rem',
left: '6.45rem',
},{
top: '2.1rem',
left: '7.6rem',
},{
top: '2.1rem',
left: '8.7rem',
},{
top: '2.1rem',
left: '9.85rem',
},{
top: '2.1rem',
left: '11rem',
},{
top: '5.7rem',
left: '6.45rem',
},{
top: '5.7rem',
left: '7.6rem',
},{
top: '5.7rem',
left: '8.7rem',
},{
top: '5.7rem',
left: '9.85rem',
},{
top: '5.7rem',
left: '11rem',
},{
top: '7.4rem',
left: '6.8rem',
},{
top: '0.7rem',
left: '4.75rem',
},{
top: '7.4rem',
left: '7.9rem',
},{
top: '7.4rem',
left: '10.2rem',
},{
top: '7.4rem',
left: '9.05rem',
},{
top: '7.4rem',
left: '11.3rem',
}]
$(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/new_2.png" 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>
<a class="flex-box" href="./onelou.html">
<p class="tabName">一楼</p>
<p class="monitor monitor2">监控点<span>28</span></p>
</a>
</li>
<li class="current">
<a class="flex-box" href="./twolou.html">
<p class="tabName">二楼</p>
<p class="monitor monitor2">监控点<span>27</span></p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_box">
<div class="room_box">
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment