Эффект увеличения изображения?

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>