僅在特定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上使用縮放

回答

相關問題