lineadecodigo_html5/Imagenes/zom-sobre-imagen.html at master · victorcuervo/lineadecodigo_html5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom sobre imagen</title>
    <style>
        .zoom-container {
            width: 300px;
            height: 300px;
            overflow: hidden;
            border: 2px solid #000;
            position: relative;
        }

        .zoom-container img {
            transition: transform 0.2s;
            transform-origin: center center;
        }
    </style>

</head>
<body>
    <h1>Zoom sobre imnagen</h1>
    <p>Pasa con el ratón sobre la imagen y haz zoom sobre ella mediante la rueda del ratón o de forma gestual</p>

    <div class="zoom-container">
        <img id="zoomImage" src="../Resources/images/logo.jpg" alt="Imagen para el ejemplo del Zoom" style="width: 100%; height: auto;">
    </div>

    <script>
        const img = document.getElementById('zoomImage');
        let scale = 1;
        const scaleFactor = 0.1;

        img.onwheel = function(event) {
            event.preventDefault();
            console.log(event.deltaY);
            if (event.deltaY < 0) {
                scale += scaleFactor;
            } else {
                scale -= scaleFactor;
                if (scale < scaleFactor) {
                    scale = scaleFactor;
                }
            }
            img.style.transform = `scale(${scale})`;
        };
    </script>

    <br/><br/>
    <hr>
    Artículo disponible en: <a href="https://lineadecodigo.com/html5/zoom-en-imagenes-con-el-raton-en-html5/">https://lineadecodigo.com/html5/zoom-en-imagenes-con-el-raton-en-html5/</a><br/>
    <a href="http://lineadecodigo.com" title="Linea de Codigo">lineadecodigo.com</a>


</body>
</html>