图像缩放效果

Question

想象一下，一堆图像出现在远处，无论你点击哪里，它都会使用鼠标X、Y作为锚点放大。因此，基本上所有的图像，无论它们是如何排列的（可能是在单独的DIV中），都会无缝地放大在一起，就像相机放大了拼贴画一样。

我很难想象在jQuery中该怎么做。有什么建议吗？CSS3动画转换可能吗？注意：缩放时必须完全保持图像质量

Answer 1

这是一个相当新的标准，但使用CSS的zoom属性，只需一点javascript就可以放大页面内容，甚至是特定元素。

此示例将在单击页面时展开wrapper元素及其所有内容。

<div id="wrapper">
    <div id="someContent"></div>
    <img src="img.png" />
</div>
<script>
    document.body.addEventListener
    ("click", function(){zoom(document.getElementById("wrapper"))}, true);
    function zoom(elem) {
        var zAtt = parseFloat(elem.style.zoom);
        if(isNaN(zAtt)) zAtt = 100;
        zAtt+=4;
        console.log(zAtt);
        console.log(elem);
        elem.style.zoom = zAtt + "%";

    }
</script>