10个小圆点,单击哪个就弹出该小圆点下的坐标
时间: 2024-10-12 22:05:47 浏览: 4
要在网页上实现这样的功能,你需要结合HTML、CSS以及JavaScript。每个小圆点实际上是一个按钮,点击时会触发JavaScript事件处理函数,显示对应的小圆点的坐标信息。这里是一个基本示例:
HTML部分:
```html
<div id="dots">
<div class="dot" data-coords="1,1">1</div>
<div class="dot" data-coords="2,2">2</div>
<!--...重复9次,替换为实际坐标数据-->
</div>
```
CSS部分:
```css
.dot {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ccc;
cursor: pointer;
margin-right: 5px;
}
.dot:hover {
background-color: #ddd;
}
```
JavaScript部分(使用jQuery简化):
```javascript
$(document).ready(function() {
$('#dots .dot').click(function() {
var coords = $(this).data('coords');
alert('您点击的圆点坐标为 (' + coords[0] + ', ' + coords[1] + ')');
});
});
```
当你点击任一小圆点时,就会弹出一个包含相应坐标的警告框。