<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1000x Zoom Camera Simulation</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
overflow: hidden;
}
#zoom-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
#zoom-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.1s;
}
#zoom-level {
position: absolute;
top: 20px;
left: 20px;
color: #fff;
font-size: 24px;
font-family: Arial, sans-serif;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="zoom-container">
<img id="zoom-image" src="https://via.placeholder.com/1920x1080" alt="Zoomable Image">
<div id="zoom-level">Zoom: 1x</div>
</div>
<script>
const zoomContainer = document.getElementById('zoom-container');
const zoomImage = document.getElementById('zoom-image');
const zoomLevel = document.getElementById('zoom-level');
let scale = 1;
const maxScale = 1000; // 1000x zoom
const zoomFactor = 1.1; // Zoom increment factor
// Function to handle zoom in
function zoomIn() {
if (scale < maxScale) {
scale *= zoomFactor;
zoomImage.style.transform = `scale(${scale})`;
zoomLevel.textContent = `Zoom: ${Math.round(scale)}x`;
}
}
// Function to handle zoom out
function zoomOut() {
if (scale > 1) {
scale /= zoomFactor;
zoomImage.style.transform = `scale(${scale})`;
zoomLevel.textContent = `Zoom: ${Math.round(scale)}x`;
}
}
// Mouse wheel event for zooming
zoomContainer.addEventListener('wheel', (event) => {
event.preventDefault();
if (event.deltaY < 0) {
zoomIn();
} else {
zoomOut();
}
});
// Touch events for pinch-to-zoom on mobile devices
let initialDistance = null;
zoomContainer.addEventListener('touchstart', (event) => {
if (event.touches.length === 2) {
initialDistance = Math.hypot(
event.touches[0].clientX - event.touches[1].clientX,
event.touches[0].clientY - event.touches[1].clientY
);
}
});
zoomContainer.addEventListener('touchmove', (event) => {
if (event.touches.length === 2) {
const currentDistance = Math.hypot(
event.touches[0].clientX - event.touches[1].clientX,
event.touches[0].clientY - event.touches[1].clientY
);
if (initialDistance !== null) {
if (currentDistance > initialDistance) {
zoomIn();
} else {
zoomOut();
}
initialDistance = currentDistance;
}
}
});
zoomContainer.addEventListener('touchend', () => {
initialDistance = null;
});
</script>
</body>
</html>
Comments
Post a Comment