html鼠标悬停显示坐标,js如何在image标签上获取鼠标停留坐标位置
时间: 2024-02-03 18:11:42 浏览: 30
你可以在鼠标移动事件上监听鼠标坐标,并将其显示在页面上。如果你想在一个图片标签上获取鼠标停留的位置,你需要将鼠标移动事件监听器添加到该图片标签上。
下面是一个简单的例子:
HTML
```html
<img id="myImage" src="path/to/image.jpg" width="500" height="500" />
<div id="coords"></div>
```
JavaScript
```javascript
const image = document.getElementById('myImage');
const coords = document.getElementById('coords');
image.addEventListener('mousemove', e => {
const x = e.offsetX;
const y = e.offsetY;
coords.innerText = `(${x}, ${y})`;
});
```
在上面的代码中,我们首先获取了图像标签和文本坐标的元素。然后,我们使用`addEventListener`方法添加了一个`mousemove`事件监听器,该监听器在鼠标在图像上移动时触发。在监听器中,我们使用`offsetX`和`offsetY`属性获取鼠标在图像中的位置,并将其显示在文本坐标元素中。
相关问题
html鼠标悬停显示坐标,js如何在image标签上获取鼠标停留坐标位置页面案例
可以使用以下代码实现:
HTML:
```html
<img src="example.jpg" onmousemove="showCoords(event)">
<div id="coords"></div>
```
JavaScript:
```javascript
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X: " + x + ", Y: " + y;
document.getElementById("coords").innerHTML = coords;
}
```
解释:
1. 在`<img>`标签中添加`onmousemove`事件,并将其绑定到`showCoords(event)`函数。
2. `showCoords(event)`函数获取鼠标停留位置的横纵坐标。
3. 将坐标信息显示在页面上,可以通过`document.getElementById("coords")`获取`<div>`标签,并通过`innerHTML`属性更新其内容。
qt鼠标悬停图片放大,QGraphicsView使用鼠标滚轮在鼠标位置放大和缩小
您可以通过以下步骤实现在鼠标悬停时放大图片:
1. 为需要放大的图片添加一个QGraphicsPixmapItem对象。
2. 监听QGraphicsView的鼠标移动事件,并在事件处理函数中获取鼠标位置。
3. 在鼠标移动事件处理函数中,计算鼠标位置是否在图片所在的矩形区域内。如果在,则将图片的缩放比例增加一定值,然后重新设置QGraphicsPixmapItem的缩放比例。
4. 在鼠标离开事件处理函数中,将图片的缩放比例还原为初始值。
以下是一个示例代码:
```python
from PyQt5.QtWidgets import QGraphicsView, QGraphicsScene, QGraphicsPixmapItem
from PyQt5.QtGui import QPixmap
from PyQt5.QtCore import Qt
class MyView(QGraphicsView):
def __init__(self, parent=None):
super(MyView, self).__init__(parent)
self.setMouseTracking(True)
self.setScene(QGraphicsScene(self))
self.pixmap_item = QGraphicsPixmapItem(QPixmap("image.png"))
self.scene().addItem(self.pixmap_item)
self.zoom_factor = 1.0
def mouseMoveEvent(self, event):
pos = self.mapToScene(event.pos())
if self.pixmap_item.boundingRect().contains(pos):
self.zoom_factor += 0.1
self.pixmap_item.setTransformOriginPoint(event.pos())
self.pixmap_item.setScale(self.zoom_factor)
super(MyView, self).mouseMoveEvent(event)
def leaveEvent(self, event):
self.zoom_factor = 1.0
self.pixmap_item.setScale(self.zoom_factor)
super(MyView, self).leaveEvent(event)
```
要实现使用鼠标滚轮在鼠标位置放大和缩小,请按照以下步骤操作:
1. 监听QGraphicsView的鼠标滚轮事件,并在事件处理函数中获取鼠标位置。
2. 计算鼠标位置在场景坐标系中的位置,并以此为中心进行缩放。
3. 通过设置QGraphicsView的缩放比例实现放大和缩小。
以下是一个示例代码:
```python
from PyQt5.QtWidgets import QGraphicsView, QGraphicsScene
from PyQt5.QtGui import QTransform
from PyQt5.QtCore import Qt
class MyView(QGraphicsView):
def __init__(self, parent=None):
super(MyView, self).__init__(parent)
self.setTransformationAnchor(QGraphicsView.AnchorUnderMouse)
self.setResizeAnchor(QGraphicsView.AnchorUnderMouse)
self.setMouseTracking(True)
self.setScene(QGraphicsScene(self))
self.zoom_factor = 1.0
def wheelEvent(self, event):
pos = self.mapToScene(event.pos())
delta = event.angleDelta().y()
zoom_delta = delta / 1200.0
self.zoom_factor += zoom_delta
if self.zoom_factor < 0.1:
self.zoom_factor = 0.1
elif self.zoom_factor > 10.0:
self.zoom_factor = 10.0
self.setTransformationAnchor(QGraphicsView.AnchorUnderMouse)
self.setResizeAnchor(QGraphicsView.AnchorUnderMouse)
self.setTransformationAnchor(QGraphicsView.NoAnchor)
self.setResizeAnchor(QGraphicsView.NoAnchor)
self.scale(1+zoom_delta, 1+zoom_delta)
self.centerOn(pos)
def centerOn(self, pos):
viewport_rect = self.viewport().rect()
scene_rect = self.scene().sceneRect()
center = QTransform().map(pos).toPoint()
dx = viewport_rect.center().x() - center.x()
dy = viewport_rect.center().y() - center.y()
new_center = self.mapToScene(viewport_rect.center() + QPoint(dx, dy))
if scene_rect.contains(new_center):
self.setSceneRect(scene_rect)
super(MyView, self).centerOn(new_center)
```
希望这可以帮助到您!