在容器中放大/縮小

Question

我想實現一個系統，以使用javascript實時放大/縮小容器div。容器包含通過使用jsPlumb庫通過一條線連接的不同subdivs我的網頁看起來是這樣的：

example http://s12.postimage.org/kari583gd/Untitled.png

是否有任何第三方庫，這將幫助我實現這個？請告訴我從哪裏開始。先謝謝你。

Answer 1

環顧網絡，似乎沒有任何圖書館爲你打算做什麼 - 雖然我希望被證明是錯誤的。

編輯：在處理完全與此無關的事情時，我遇到了一個名爲zoom.js的庫，它允許您放大任何元素。它的API看起來很容易使用，但它仍然是一個概念證明，並且不適用於IE。創作者特意說，不要在任何重要的東西上使用它，這也是爲什麼我也保留我原來的答案。

---

然而，通過對zoomooz的源代碼看，我敢肯定，這裏是你如何做到這一點：使用jQuery animate function慢慢在css transform property應用更改。更具體地說，你想使用scale(XValue, YValue)函數。

幾件事情要記住使用CSS transform：

• 設置transform-origin特性，使網頁縮放時的屏幕內配合，而不是邊界或類似的東西外面去。
• 除了transform之外，還包括瀏覽器特定前綴，如-webkit-transform,-ms-transform和-moz-transform。
• 根據Mozilla的說法，CSS轉換是一項實驗性功能，因此請確保您的用戶正在使用的瀏覽器爲compatible。