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>

图像缩放效果？

1 个答案: