Question

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

以下是我希望放大的#seats div的示例 https://jsfiddle.net/ohaumyxj/

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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使用缩放

2 个答案: