仅在特定div上使用缩放

Question

我们有一个座位计划，在手机上仅在setaplan上具有缩放功能非常方便。 当您在Andoid手机上使用缩小功能进行放大时，它会放大，但是您必须完全缩小以保持页面的响应外观。

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

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

 .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

请参阅小提琴

的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();
            });
        });