11

f43b3769 · zhangyudan · 525592b2 · f43b3769 · f43b3769 · f43b3769
Commit f43b3769 authored Nov 09, 2023 by zhangyudan
Showing with 85 additions and 19 deletions

.DS_Store .DS_Store +0 -0

jcqy_nwq.html jcqy_nwq.html +26 -12

.DS_Store static/.DS_Store +0 -0

common.css static/css/common.css +59 -7

camera.png static/images/camera.png +0 -0

No files found.
--- a/.DS_Store
+++ b/.DS_Store
--- a/jcqy_nwq.html
+++ b/jcqy_nwq.html
@@ -27,6 +27,9 @@

 <body>
    <header class="header"></header>
+    <div class="content">
+
+    </div>

 </body>

@@ -34,21 +37,32 @@
 <!-- <script src="static/js/flexible.js"></script> -->
 <script src="static/js/rem.js"></script>
 <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) {
-        // 根据不同的区域执行不同的操作
-        switch (areaNumber) {
-            case 1:
        alert("点击了区域 1");
-                // 执行区域 1 的操作
-                break;
-            case 2:
-                alert("点击了区域 2");
-                // 执行区域 2 的操作
-                break;
-                // 添加更多的 case 语句处理其他区域
-        }
    }

    function showTooltip(event, content) {

--- a/static/.DS_Store
+++ b/static/.DS_Store
--- a/static/css/common.css
+++ b/static/css/common.css
+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,ol{list-style:none;}
-select,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;}
+ul,
+ol {
+  list-style: none;
+}
+
+select,
+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;
+}
--- a/static/images/camera.png
+++ b/static/images/camera.png