要使用jQuery实现鼠标悬停在图片上时显示其实际大小，你可以通过添加一个自定义的HTML元素（如`
首先，确保你的HTML文档已经引入了jQuery库。然后，你可以按照以下步骤编写代码：
1. 为你的图片添加一个共同的类名，以便于通过jQuery选择器选中它们。
2. 编写jQuery脚本来监听图片的`mouseenter`和`mouseleave`事件。
3. 在`mouseenter`事件中，计算或获取图片的实际大小，并将其显示在一个自定义的HTML元素中。
4. 在`mouseleave`事件中，隐藏或移除显示图片大小的HTML元素。
这里是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片大小预览</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* 可以添加一些样式来美化显示大小的元素 */
.size-info {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 5px;
border-radius: 5px;
font-size: 14px;
display: none; /* 默认不显示 */
}
</style>
</head>
<body>
<img src="your-image-url.jpg" class="preview-image" alt="示例图片" style="width: 200px; height: auto;">
<div class="size-info"></div>
<script>
$(document).ready(function() {
$('.preview-image').on('mouseenter', function() {
var img = $(this);
var naturalWidth = img[0].naturalWidth;
var naturalHeight = img[0].naturalHeight;
// 找到最近的.size-info元素，并设置其文本和位置
var sizeInfo = img.next('.size-info');
sizeInfo.text('宽度: ' + naturalWidth + 'px, 高度: ' + naturalHeight + 'px');
sizeInfo.css({
left: img.offset().left + img.outerWidth() + 10, // 右边显示
top: img.offset().top + (img.height() / 2) - (sizeInfo.height() / 2) // 垂直居中
}).show();
}).on('mouseleave', function() {
$(this).next('.size-info').hide(); // 隐藏显示大小的元素
});
});
</script>
</body>
</html>
注意：
- 你需要将`your-image-url.jpg`替换为你的图片URL。
- 示例中使用了`img[0].naturalWidth`和`img[0].naturalHeight`来获取图片的原始尺寸。这是HTMLImageElement的属性，它提供了图片的原始尺寸（即图片文件本身的尺寸，不考虑CSS样式的影响）。
- 示例中的`.size-info`元素默认是隐藏的，当鼠标悬停在图片上时，会显示在图片的右侧，并且垂直居中于图片。你可以根据需要调整样式和位置。
- 如果你有多张图片需要这样的功能，确保它们都有`preview-image`类名，并且每张图片的后面都跟着一个`.size-info`元素（或者通过jQuery动态创建和定位这些元素）。