仅对特定 div 使用缩放

Question

我们有一个座位计划，在移动设备上只有在 setaplan 上有缩放功能会很方便。当您在 Andoid 手机上使用捏合放大时，它会放大，但您必须完全张开以保持页面的响应外观。

这是#seats 的示例 div 我想放大 https://jsfiddle.net/ohaumyxj/

这是可以用普通 CSS 实现的东西还是 jQuery 在这里混用？我正在寻找您在网站的联系页面上使用 Google 地图获得的东西类型，或者使用点按缩放功能可能更好一些。

.container {
  margin: 0 auto;
}
#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: '';
  display: block;
  padding: 50%;
}
#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
  background-image: url(https://s21.postimg.org/qd8mqgh07/seatplan11.gif);
  background-repeat: no-repeat;
  background-size: contain;
}
#seats div {
  position: absolute;
  width: 1.5%;
  height: 1.5%;
}
#seats .green {
  background: url('https://s12.postimg.org/93ugmrvb1/seatg.gif') no-repeat center;
  background-size: cover;
  margin:0 !important;
}

<div id="theatre">
  <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats">
      <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div>
      <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div>
      <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div>
      <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div>
    </div>
  </div>
</div>

Answer 1

像这样？

var zoomable = document.getElementById('seats'),
    zX = 1;
window.addEventListener('wheel', function (e) {
    var dir;
    if (!e.ctrlKey) {
        return;
    }
    dir = (e.deltaY > 0) ? 0.1 : -0.1;
    zX += dir;
    zoomable.style.transform = 'scale(' + zX + ')';
    e.preventDefault();
    return;
});

Answer 2

请参考fiddle

HTML

<div id="theatre" class="zoomViewport">
        <div class="container zoomContainer">
            <div id="bmessage">Select the seats that you need.</div>
            <div id="seats" class="zoomTarget">
                <div class="avail std green" si="332" title="Y1" style="top: 8.7%; left: 10.2%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="333" title="Y2" style="top:8.7%; left:13%;"></div>
                <div class="avail std green" si="334" title="Y3" style="top:8.7%; left:16.2%;"></div>
                <div class="avail std green" si="335" title="Y4" style="top: 8.7%; left: 18.8%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="336" title="Y5" style="top: 8.7%; left: 21.5%; border: none; margin: 3px 1px;"></div>
                <div class="avail std green" si="337" title="Y6" style="top:8.7%; left:24.2%;"></div>
            </div>
        </div>
    </div>

Jquery:

 $(document).ready(function () {
            $("#seats").click(function (evt) {
                $(this).zoomTo({ targetsize: 0.75, duration: 600 });
                evt.stopPropagation();
            });
        });

仅对特定 div 使用缩放

Using zoom on a specific div only

html

css

jquery

zooming