Задачка на JavaScript (слои)

Lan4 · Сообщение **Lan4** » 08.06.2010 23:37

В общем есть такое задание на слои по яваскрипту:
"Круг разбит на пять цветовых сектора. При попадании курсора мыши на любой сектор, он должен плавно расширяться от центра до определенного размера или до момента снятия курсора мыши с сектора. По кнопке он должен возвращаться в начальное состояние."

Сразу говорю: да, это лаба, но готового решения мне не надо и я не хочу его =)

Проблема в чем: написать я это могу, но выйдет немного громоздко, а учитываю сложность предыдущих лаб и уровень студентов, решение тут должно быть прозрачное и строк на 20-50 =) т.к. препод опять ничего не рассказывал, то приходится придумывать самим (в моем случае приходится придумывать самому, и делать другим

ну лан, неважно... просто сложный код могут не зачесть преподы...)

Ну вобщем... какие у вас есть идеи по поводу реализации такого задания?
У меня были варианты:
- каждый сектор - отдельное изображение. Проблемы - изображения перекрываются, а значит малость повозится, чтоб определить какое изображение изменять (хотя мб не додумал, и там не все так сложно)
- нарисовать круг с секторами примитивами - маленькими квадратными div'ами (

). Но так препод не примет...

Есть еще идеи? Спинным мозгом чувствую, что должно быть элементарная реализация =)

eddy · Сообщение **eddy** » 09.06.2010 00:06

Я нечто подобное уже давно делаю. Ваша задачка очень простая: делайте картинку SVG, на каждый сектор вешайте onclick-обработчик, который и будет плавно менять радиус.
Если SVG напишете ручками (а не будете формировать скриптом), то выйдет как раз несколько десятков строк.

Lan4 · Сообщение **Lan4** » 10.06.2010 19:06

Благодарю за идею =) Но я что-то пока не очень разобрался. Сделал по другому. Выкладываю решение:

Код: Выделить всё

<html>
    <body>
        <div style = "border: 1px solid gray; position: absolute; left: 0; top: 0; width: 402; height: 402;" onmousemove = "x = event.x; y = event.y" onmouseout = "x = y = 0">
            <script>
                var n = 5;
                var x = 0, y = 0;
                var r = new Array(100, 100, 100, 100, 100);

                for (var i = 0; i < n; i++) document.writeln("<img id = div" + i + " style = 'border: 0px; position: absolute; left: 100; top: 100; width: 200; height: 200;' src = " + i + "_" + n + ".png>");

                window.setInterval("tick()", 10);

                function tick() {
                    var i = (Math.ceil(Math.atan2(x - 200, y - 200) / Math.PI / 2 * n) + n) % n;
                    var s = Math.sqrt((x - 200) * (x - 200) + (y - 200) * (y - 200));
                    if (s < r[i])
                        setRad(i, Math.min(r[i] + 3, 200));
                }

                function reset() {
                    for (var i = 0; i < n; i++)
                        setRad(i, 100)
                }

                function setRad(i, rad) {
                    r[i] = rad;
                    with (document.getElementById("div" + i).style) {
                        left = top = 200 - r[i];
                        width = height = 2 * r[i];
                    }
                }
            </script>
        </div>
        <input type = button onclick = "reset()" value = "Reset" style = "position: absolute; left: 10; top: 410">
    </body>
</html>

В данном скрипте используются изображения 0_5.png, 1_5.png, 2_5.png, 3_5.png, 4_5.png, которые представляют собой прозрачные квадраты с одним из пяти секторов.

eddy · Сообщение **eddy** » 10.06.2010 21:11

Все-таки, лучше было бы с SVG или canvas...

unixforum.org

Задачка на JavaScript (слои)

Задачка на JavaScript

Re: Задачка на JavaScript

Re: Задачка на JavaScript

Re: Задачка на JavaScript