43 lines
2.3 KiB
HTML
43 lines
2.3 KiB
HTML
<!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="../layui/css/layui.css">
|
|
<!--引入layui layer-->
|
|
<script src="../layui/layui.all.js" charset="utf-8"></script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="background-container"></div>
|
|
<div class="control-panel">
|
|
<div class="control-section">
|
|
<div class="control-section">
|
|
<h3>增加箭头</h3>
|
|
<div class="image-selector">
|
|
<div class="image-btn" data-image="images/1.png" style="background-image: url('images/1.png');"></div>
|
|
<div class="image-btn" data-image="images/2.png" style="background-image: url('images/2.png');"></div>
|
|
<div class="image-btn" data-image="images/3.png" style="background-image: url('images/3.png');"></div>
|
|
<div class="image-btn" data-image="images/4.png" style="background-image: url('images/4.png');"></div>
|
|
<div class="image-btn" data-image="images/5.png" style="background-image: url('images/5.png');"></div>
|
|
<div class="image-btn" data-image="images/6.png" style="background-image: url('images/6.png');"></div>
|
|
</div>
|
|
<!-- 删除全局停止距离输入框 -->
|
|
<button class="save-btn" id="markCenterBtn" style="margin-top: 10px;">标记中心点</button>
|
|
<button class="save-btn" id="startAnimationBtn" style="margin-top: 10px;">开始</button>
|
|
<button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
|
|
</div>
|
|
</div>
|
|
<div id="contextMenu">
|
|
<div id="deleteArrow">删除箭头</div>
|
|
<div class="menu-separator"></div>
|
|
<div class="menu-item" data-point="top-left"><span class="check-mark"></span>左上角</div>
|
|
<div class="menu-item" data-point="top-right"><span class="check-mark"></span>右上角</div>
|
|
<div class="menu-item" data-point="bottom-left"><span class="check-mark"></span>左下角</div>
|
|
<div class="menu-item" data-point="bottom-right"><span class="check-mark"></span>右下角</div>
|
|
</div>
|
|
|
|
<script src="js/script.js"></script>
|
|
</body>
|
|
</html> |