實現移動端點擊圖片放大，兩指縮放 scale.js實現

時間 2020-11-30

標籤 javascript css html java spa scala code htm blog 圖片欄目無線简体版

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>圖片縮放</title>
        <link rel="stylesheet" type="text/css" href="scale.css" />
        <style type="text/css"> .list img{ width: 200px; height: 200px;
            }
        </style>
    </head>

    <body>
        <div class="list">
            <img src="frog.jpg" />
            <img src="frog.jpg" />
        </div>
        <section class="imgzoom_pack">
            <div class="imgzoom_x">X</div>
            <div class="imgzoom_img"><img src="" /></div>
        </section>
        <script src="scale.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(event) { ImagesZoom.init({ "elem": ".list" }); }, false); </script>
    </body>

</html>