悬浮框.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview on Hover</title>
<style>
.attachment-link {
margin: 20px;
float: right;
}
.file-link {
color: #409EFF;
text-decoration: none;
cursor: pointer;
font-size: 13px;
}
.content-preview {
position: fixed;
pointer-events: none;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding: 5px;
max-width: 300px;
z-index: 9999;
}
.preview-text {
white-space: pre-wrap;
word-wrap: break-word;
padding: 5px;
}
</style>
</head>
<body>
<div class="attachment-link">
<a class="file-link" href="http://localhost:5173/cat.jpg"
onmouseenter="handleMouseEnter(this, 'http://localhost:5173/cat.jpg', event)" onmouseleave="handleMouseLeave()"
onmousemove="updatePreviewPosition(event)">
📎 http://localhost:5173/cat.jpg
</a>
<a class="file-link" href="http://localhost:5173/test.txt"
onmouseenter="handleMouseEnter(this, 'http://localhost:5173/test.txt', event)" onmouseleave="handleMouseLeave()"
onmousemove="updatePreviewPosition(event)">
📎 http://localhost:5173/test.txt
</a>
</div>
<div id="imagePreview" class="content-preview">
<img id="previewImage" class="preview-image" src="" alt="Preview" style="display: none;" width="100%" height="100%">
<pre id="previewText" class="preview-text" style="display: none;"></pre>
</div>
<script>
const imagePreview = document.getElementById('imagePreview');
const previewImage = document.getElementById('previewImage');
const previewText = document.getElementById('previewText');
let isPreviewVisible = false;
function isImageFile(url) {
if (!url) return false;
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
return imageExtensions.some(ext => url.toLowerCase().endsWith(ext));
}
function isTextFile(url) {
if (!url) return false;
const textExtensions = ['.txt', '.log', '.csv', '.json', '.xml', '.html', '.js', '.css'];
return textExtensions.some(ext => url.toLowerCase().endsWith(ext));
}
function handleMouseEnter(element, url, event) {
if (isImageFile(url)) {
previewImage.src = url;
previewImage.style.display = 'block';
previewText.style.display = 'none';
imagePreview.style.display = 'block';
isPreviewVisible = true;
updatePreviewPosition(event);
} else if (isTextFile(url)) {
fetchTextContent(url).then(content => {
previewText.textContent = content;
previewImage.style.display = 'none';
previewText.style.display = 'block';
imagePreview.style.display = 'block';
isPreviewVisible = true;
updatePreviewPosition(event);
});
}
}
function fetchTextContent(url) {
return Promise.resolve("This is a sample text file content.\n\nIt can contain multiple lines.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl eget ultricies tincidunt, nisl nisl aliquam nisl, eget ultricies nisl nisl eget nisl.");
}
function handleMouseLeave() {
imagePreview.style.display = 'none';
isPreviewVisible = false;
}
function updatePreviewPosition(event) {
if (isPreviewVisible) {
const previewWidth = 300;
const previewHeight = 300;
const offset = 15;
let x = event.clientX + offset;
let y = event.clientY + offset;
if (y + previewHeight > window.innerHeight) {
y = window.innerHeight - previewHeight - 5;
}
// if (x + previewWidth > window.innerWidth) {
// x = window.innerWidth - previewWidth - 5;
// }
imagePreview.style.left = x + 'px';
imagePreview.style.top = y + 'px';
}
}
</script>
</body>
</html>
网友评论