在元素中bigpicture.js/live demo ,我在缩放时替换每个元素(通过移动它们并更改它们的字体大小)。它有效。
现在我想测试 CSS' nice transform: scale(...);
功能代替。
在接下来的测试中,我想:
- 放大整个
<div id="container">
当用户点击时。 - 当用户按住 CTRL 并单击时缩小。
问题是无论我们点击哪里,缩放都是以同样的方式完成的。 如何缩放点击的点?(好像它已经适用于我当前的 bigpicture.js 实现)。
var container = document.getElementById("container"), wrapper = document.getElementById("wrapper");
var zoom = 1;
wrapper.onclick = function (e) {
zoom *= e.ctrlKey ? 1/1.2 : 1.2;
container.style.transform = "scale(" + zoom + ")";
}
<style>
#wrapper { position:absolute; top:0px; left:0px; width:1000px; height:600px; background-color: #AAAABB; }
#container { position:absolute; top:100px; left:100px; width:600px; height:400px; background-color: grey; transition-duration: 0.3s; }
#text { position:absolute; top:100px; left:100px; font-size:30px; }
</style>
<div id="wrapper">
<div id="container">
<div id="text">Test<div>
</div>
</div>
重要提示:您绝对需要进入整页以了解它的内容。
注意:我用 transform-origin
做了一些尝试, 不成功。
最佳答案
您还需要将当前缩放应用于屏幕坐标:
var container = document.getElementById("container"), wrapper = document.getElementById("wrapper"), marker = document.getElementById("marker");
var zoom = 1;
wrapper.onclick = function (e) {
var x = e.clientX - container.getBoundingClientRect().left;
var y = e.clientY - container.getBoundingClientRect().top;
console.log(x,y)
x /= zoom;
y /= zoom;
zoom *= e.ctrlKey ? 1/1.2 : 1.2;
container.style.transform = "scale(" + zoom + ")";
container.style.transformOrigin = x+"px "+y+"px";
marker.style.top = (y-2)+'px';
marker.style.left = (x-2)+'px';
}
<style>
#wrapper { position:absolute; top:0px; left:0px; width:1000px; height:600px; background-color: #AAAABB; }
#container { position:absolute; top:100px; left:100px; width:600px; height:400px; background-color: grey; transition-duration: 0.3s; }
#text { position:absolute; top:100px; left:100px; font-size:30px; }
#marker { position:absolute; width:4px; height:4px; background-color:red; }
</style>
<div id="wrapper">
<div id="container">
<div id="marker"></div>
<div id="text">Test<div>
</div>
</div>
关于javascript - 使用 CSS 变换缩放 <div> 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27461172/