图片缩放效果？

【问题标题】：Image zoom effect?图片缩放效果？
【发布时间】：2023-03-27 09:37:02
【问题描述】：

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

我很难想到这将如何在 jQuery 中完成。有什么建议吗？ CSS3 动画过渡可能吗？注意：缩放时必须完全保留图像质量

【问题讨论】：

【解决方案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>

【讨论】：