Skip to content

J
jianchayuan
Commit b40d7f46 authored by zhangyudan's avatar zhangyudan
Browse files
Options

页面

parent 406c6590
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 74 deletions
jcqy_nwq.html
View file @ b40d7f46
...@@ -2,89 +2,70 @@ ...@@ -2,89 +2,70 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<script src="static/js/flexible.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/common.css" />
<link rel="stylesheet" type="text/css" href="static/css/workshop.css" />
<title>上海市人民检察院</title> <title>上海市人民检察院</title>
<link rel="stylesheet" href="static/css/common.css">
</head> </head>
<style type="text/css"> <style type="text/css">
/* 鼠标悬停时显示的tooltip样式 */ .content {
background: url(static/images/workshop_bg.png);
width: 100%;
min-height: 100vh;
background-position-x: center;
}
.tooltip { .content_box {
position: absolute; width: 13rem;
background-color: #333; height: 8.8rem;
color: #fff; background: rgba(0, 0, 0, 0.5);
padding: 5px; border-radius: 10px;
border-radius: 5px;
display: none;
/* 初始时隐藏 */
} }
</style> </style>
<script type="text/javascript">
$(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();
})
});
</script>
<body> <body>
<header class="header"></header>
<div class="content"> <div class="content">
<div class="flex-box padding_box">
<div class="menu_box">
<div class="menu_title_box">北车间</div>
<div class="tab_list">
<ul>
<li class="current">
<div class="flex-box">
<p>一楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
<li>
<div class="flex-box">
<p>二楼</p>
<p class="monitor">监控点<span>28</span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="content_box">
</div>
</div>
</div> </div>
</body> </body>
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<!-- <script src="static/js/flexible.js"></script> -->
<script src="static/js/rem.js"></script>
<script type="text/javascript">
$(function() {
//
var arr = [{
top: '1rem',
left: '1rem'
}, {
top: '2rem',
left: '2rem'
}]
var divElement = document.querySelector('.content');
console.log(divElement)
let htmlTxt = ''
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()"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 1");
}
function showTooltip(event, content) {
// 获取tooltip元素
var tooltip = document.getElementById("tooltip");
// 设置tooltip的内容
tooltip.innerHTML = content;
// 设置tooltip的位置
tooltip.style.left = event.pageX + "px";
tooltip.style.top = event.pageY + "px";
// 显示tooltip
tooltip.style.display = "block";
}
function hideTooltip() {
// 隐藏tooltip
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
</script>
</html> </html>
\ No newline at end of file
jcqy_nwqqq.html 0 → 100644
View file @ b40d7f46
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>上海市人民检察院</title>
<link rel="stylesheet" href="static/css/common.css">
</head>
<style type="text/css">
/* 鼠标悬停时显示的tooltip样式 */
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
display: none;
/* 初始时隐藏 */
}
</style>
<body>
<header class="header"></header>
<div class="content">
</div>
</body>
<script src="static/js/jquery-1.8.1.min.js" type=text/javascript></script>
<!-- <script src="static/js/flexible.js"></script> -->
<script src="static/js/rem.js"></script>
<script type="text/javascript">
$(function() {
//
var arr = [{
top: '1rem',
left: '1rem'
}, {
top: '2rem',
left: '2rem'
}]
var divElement = document.querySelector('.content');
console.log(divElement)
let htmlTxt = ''
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()"></img>'
// 使用 innerHTML 添加元素
}
divElement.innerHTML = htmlTxt;
});
function handleClick(areaNumber) {
alert("点击了区域 1");
}
function showTooltip(event, content) {
// 获取tooltip元素
var tooltip = document.getElementById("tooltip");
// 设置tooltip的内容
tooltip.innerHTML = content;
// 设置tooltip的位置
tooltip.style.left = event.pageX + "px";
tooltip.style.top = event.pageY + "px";
// 显示tooltip
tooltip.style.display = "block";
}
function hideTooltip() {
// 隐藏tooltip
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
</script>
</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