HTML 5 平移缩放的demo（类似地图效果）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个平移缩放的demo</title>
  <style>
    .container {
      border: 1px solid #ddd;
      width: 1600px;
      height: 900px;
      box-sizing: content-box;
      overflow: hidden;
    }
    .scene {
      position: relative;
      background: #ddd;
      width: 1600px;
      height: 900px;
      cursor: grab;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="scene" class="scene">
      这是一个平移缩放的demo，这是一个平移缩放的demo。<br>
      <div id="el">点我试试</div>

    </div>
  </div>
  <script src='https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js'></script>
  <script>
    // just grab a DOM element
    var scene = document.querySelector('#scene')

    // And pass it to panzoom
    var instance = panzoom(scene, {
      maxZoom: 10,
      minZoom: 1,
      transformOrigin: { x: 0, y: 0 },
      initialX: 0,
      initialY: 0,
      initialZoom: 1.5
    })

    function reset() {
      const width = 1600
      const height = 900

      let obj = instance.getTransform()
      // 左上角
      if (obj.x > 0) {
        instance.moveTo(0, obj.y);
      }
      if (obj.y > 0) {
        instance.moveTo(obj.x, 0);
      }
      // 右下角
      if (obj.x < - width * (obj.scale - 1)) {
        instance.moveTo(- width * (obj.scale - 1), obj.y);
      }
      if (obj.y < - height * (obj.scale - 1)) {
        instance.moveTo(obj.x, - height * (obj.scale - 1));
      }

      // console.log(obj)

    }
    // 平移或缩放
    instance.on('transform', function (e) {
      reset()
    })

    // 点击事件
    var el = document.getElementById('el')
    el.addEventListener('click', function (e) {
      alert('点击事件')
    })
  </script>
</body>
</html>
HTML 5 平移缩放的demo（类似地图效果）

推荐阅读更多精彩内容
