|
|
| 第1行： |
第1行： |
| <html lang="zh-CN"><head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
|
| |
|
| <style>
| |
| /* ========================================================
| |
| 全局基础样式
| |
| ======================================================== */
| |
| * { margin: 0; padding: 0; box-sizing: border-box; }
| |
|
| |
| body {
| |
| background: #eef2f7;
| |
| padding: 20px;
| |
| font-family: "Microsoft YaHei";
| |
| display: flex;
| |
| justify-content: center;
| |
| }
| |
|
| |
| /* ========================================================
| |
| 外层容器与图片样式
| |
| ======================================================== */
| |
| .container {
| |
| position: relative;
| |
| width: 90%;
| |
| max-width: 900px;
| |
| }
| |
|
| |
| .image {
| |
| width: 100%;
| |
| display: block;
| |
| }
| |
|
| |
| /* ========================================================
| |
| 标记点样式
| |
| ======================================================== */
| |
| .marker {
| |
| position: absolute;
| |
| width: 0.3vw;
| |
| height: 0.3vw;
| |
| min-width: 4px;
| |
| min-height: 4px;
| |
| border-radius: 50%;
| |
| background: rgba(255, 255, 255, 1);
| |
| cursor: pointer;
| |
| transform: translate(-50%, -50%);
| |
| z-index: 10;
| |
| transition: transform 0.2s;
| |
| }
| |
|
| |
| .marker:hover {
| |
| transform: translate(-50%, -50%) scale(1.4);
| |
| background: rgb(0,255,0);
| |
| color: rgb(255,0,0);
| |
| }
| |
|
| |
| /* ========================================================
| |
| 文本框样式
| |
| ======================================================== */
| |
| .text-note {
| |
| position: absolute;
| |
| transform: translate(0, -50%);
| |
| background: rgba(255, 255, 255, 0.9);
| |
| border: 2px solid #3498db;
| |
| padding: 0.6vw 1vw;
| |
| font-size: 1vw;
| |
| min-font-size: 12px;
| |
| border-radius: 6px;
| |
| z-index: 9;
| |
| cursor: pointer;
| |
| transition: 0.2s;
| |
| font-weight: bold;
| |
| text-align: center;
| |
| }
| |
|
| |
| .text-note:hover {
| |
| background: #3498db;
| |
| color: #fff;
| |
| }
| |
|
| |
| /* ========================================================
| |
| 连线样式
| |
| ======================================================== */
| |
| .connector {
| |
| position: absolute;
| |
| width: 100%;
| |
| height: 100%;
| |
| top: 0; left: 0;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .connector line {
| |
| stroke: rgb(0, 255, 0);
| |
| stroke-width: 1;
| |
| stroke-dasharray: 2,2;
| |
| }
| |
|
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <div class="container" id="box" style="position: relative;">
| |
| <img class="image" id="image" src="http://10.20.9.176:8080/images/6/6f/%E4%BB%BB%E5%8A%A1%E5%AF%BC%E8%88%AA-%E6%A0%8F%E6%9D%86%E6%9C%BA.jpg">
| |
|
| |
| <div class="marker" style="top:64.59%; left:26.24%;" data-link="http://10.20.9.176:8080/index.php/企业A:目录/栏杆机/车检器拆除/车检器"></div>
| |
| <div class="text-note" style="top:62.94%; left:50.04%;" data-link="http://10.20.9.176:8080/index.php/企业A:目录/栏杆机/车检器拆除/车检器"> 栏杆机<br>点击跳转 </div>
| |
| <svg class="connector" id="connector" ></svg>
| |
| </div>
| |
|
| |
|
| |
| <script>
| |
| /* ========================================================
| |
| 点击跳转脚本
| |
| ========================================================= */
| |
| document.querySelectorAll(".marker, .text-note").forEach(el => {
| |
| el.onclick = () => window.location.href = el.dataset.link;
| |
| });
| |
|
| |
| /* ========================================================
| |
| 连线自动计算脚本
| |
| ========================================================= */
| |
| function updateLines() {
| |
| const svg = document.getElementById("connector");
| |
| svg.innerHTML = "";
| |
|
| |
| const markers = document.querySelectorAll(".marker");
| |
| const texts = document.querySelectorAll(".text-note");
| |
| const box = document.getElementById("box").getBoundingClientRect();
| |
|
| |
| const count = Math.min(markers.length, texts.length);
| |
|
| |
| for (let i = 0; i < count; i++) {
| |
| const a = markers[i].getBoundingClientRect();
| |
| const b = texts[i].getBoundingClientRect();
| |
|
| |
| const x1 = a.left - box.left + a.width / 2;
| |
| const y1 = a.top - box.top + a.height / 2;
| |
| const x2 = b.left - box.left;
| |
| const y2 = b.top - box.top + b.height / 2;
| |
|
| |
| const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
| |
| line.setAttribute("x1", x1);
| |
| line.setAttribute("y1", y1);
| |
| line.setAttribute("x2", x2);
| |
| line.setAttribute("y2", y2);
| |
|
| |
| svg.appendChild(line);
| |
| }
| |
| }
| |
|
| |
| window.addEventListener("load", updateLines);
| |
| window.addEventListener("resize", updateLines);
| |
| </script>
| |
| </body>
| |
| </html>
| |
