仅在特定div上使用缩放

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

这里是#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>

来源

2016-11-08 me9867

可以使用http://jaukia.github.io/zoomooz/。它是一个jQuery库 – Purushothaman

感谢Puru，我喜欢这个样子。唯一的潜在问题是用户点击座位来预订它们。所以点击座位会导致缩放 – me9867

努力让Zoomooz使用这种div结构，也许“容器内缩放”是我需要的解决方案。 – me9867

请参阅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(); 
      }); 
     });

来源

2016-11-08 10:04:58 RonyLoud

如果您将该小提琴放入手机尺寸并点击放大，它似乎不会放大座位规划。我实际上只是把我的div放在没有缩放的位置，就我所知 – me9867

喜欢这个？

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

来源

2016-11-08 09:49:31

仅在特定div上使用缩放

回答

相关问题