Front end/JS (JavaScript)

mobile zoom, 모바일 줌, pinch zoom 자바스크립트

큰덩어리 2023. 2. 2. 17:17
728x90

frog.jpg
0.24MB
pinch-zoom.umd.js
0.03MB

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="pinch-zoom.umd.js"></script>
</head>

<style>
    .pinch-zoom-parent {
        height: 70vh;
        width: 85vw;
        border: 5px solid red
    }
    .pinch-zoom-parent1 {
        height: 70vh;
        width: 85vw;
        border: 5px solid rgb(98, 0, 255)
    }
    img {
        height: 90vh;
    }
</style>

<div class="pinch-zoom-parent">
    <div class="pinch-zoom">
        <img src="frog.jpg"/>
    </div>
</div>
<div class="pinch-zoom-parent1">
    <div class="pinch-zoom1">
        <img src="frog.jpg"/>
    </div>
</div>

<script type="text/javascript">
    var el = document.querySelector('.pinch-zoom');
    new PinchZoom.default(el, {});

    var el1 = document.querySelector('.pinch-zoom1');
    new PinchZoom.default(el1, {});
</script>


</html>
728x90