Форум

Zub · #1 (**permalink**) 22.12.2011, 16:50

Добрый день.
Пытаюсь сделать всплывающий блок с информацией на JS+CSS.
Хочется одновременное изменение масштаба и прозрачности.
Нашёл пример как с поможью JS реализуется изменение прозрачности, а вот про масштаб-пока никак. Возможно ли менять? крайне желательно без всяких жквырей.
Поиском пока ничего подходящего не нашлось

nerv_ · #2 (**permalink**) 22.12.2011, 22:11

\примерно так

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body { margin: 15px; }
            div { background-color:green; height:50px; width:50px; }
        </style>
        <script type="text/javascript">
            var l;
            (function() {
                var h, w, t;
                l = function(b) {
                    var x = document.getElementsByTagName("div")[0];
                    var j = x.currentStyle || window.getComputedStyle(x, null);
                    h = j.height.replace(/\D/g,"") - 0;
                    w = j.width.replace(/\D/g,"") - 0;
                    clearTimeout(t);
                    if(b) {
                        if(h < 100) {
                            x.style.height = (h += 2) + "px";
                            x.style.width = (w += 4) + "px";
                            t = setTimeout(function() {l(true)}, 50);
                        }
                    }
                    else {
                        if(h > 50) {
                            x.style.height = (h -= 2) + "px";
                            x.style.width = (w -= 4) + "px";
                            t = setTimeout(function() {l(false)}, 50);
                        }
                    }
                }
            })();
        </script>
    </head>
    <body>
        <div onmouseover="l(true);" onmouseout="l(false);"></div>
    </body>
</html>

Zub · #3 (**permalink**) 23.12.2011, 15:56

nerv_,
спасибо огромное! буду пытаться сращивать

Форум

Справочник

Discord чат

Курсы javascript