1.0.0 • Published 2 years ago
handle-image-zoom v1.0.0
handle-image-zoom
As you see, it's a function to zoom <img> element. And there are two ways to use this function:
image.addEventListener('click', handleImageZoom)handleImageZoom(imgSrc)
Basic Function
- press the image to move it;
- wheel mouse to zoom it(or zoom in Magic Trackpad);
- press
enteror double click image to reset the image style; - press
escor click mask to quit.
Advantages
- Scale picture based on the mouse position.
- Use css transform to move and scale picture. So it has better performance in theory.
Hello World
<body>
<img id="image" class="image" alt="" src="./girl.jpg" width="400" />
<link rel="stylesheet" href="https://unpkg.com/handle-image-zoom/dist/index.css">
<script src="https://unpkg.com/handle-image-zoom/dist/index.iife.js"></script>
<script>
const image = document.getElementById('image')
image.addEventListener('click', handleImageZoom)
</script>
</body>Install
pnpm add handle-image-zoomQuick Start
import 'handle-image-zoom/dist/index.css'
import handleImageZoom from 'handle-image-zoom'
const image = document.getElementById('image')
image.addEventListener('click', handleImageZoom)
const imgSrc = 'https://xxx'
const button = document.getElementById('button')
button.addEventListener('click', () => {
handleImageZoom(imgSrc)
})