Commit f43b3769 authored by zhangyudan's avatar zhangyudan

11

parent 525592b2
File added
...@@ -27,6 +27,9 @@ ...@@ -27,6 +27,9 @@
<body> <body>
<header class="header"></header> <header class="header"></header>
<div class="content">
</div>
</body> </body>
...@@ -34,21 +37,32 @@ ...@@ -34,21 +37,32 @@
<!-- <script src="static/js/flexible.js"></script> --> <!-- <script src="static/js/flexible.js"></script> -->
<script src="static/js/rem.js"></script> <script src="static/js/rem.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() {}); $(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) { function handleClick(areaNumber) {
// 根据不同的区域执行不同的操作
switch (areaNumber) {
case 1:
alert("点击了区域 1"); alert("点击了区域 1");
// 执行区域 1 的操作
break;
case 2:
alert("点击了区域 2");
// 执行区域 2 的操作
break;
// 添加更多的 case 语句处理其他区域
}
} }
function showTooltip(event, content) { function showTooltip(event, content) {
......
body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
margin: 0;
padding: 0;
border: 0;
}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} ul,
ul,ol{list-style:none;} ol {
select,input,img,select{vertical-align:middle;} list-style: none;
a{text-decoration:none;} }
a:link{color:#009;}
a:visited{color:#800080;} select,
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} input,
img,
select {
vertical-align: middle;
}
a {
text-decoration: none;
}
a:link {
color: #009;
}
a:visited {
color: #800080;
}
a:hover,
a:active,
a:focus {
color: #c00;
text-decoration: underline;
}
.content {
position: relative;
}
.camera {
position: absolute;
}
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