Форум

Dim@ · #11 (**permalink**) 19.04.2013, 17:19

tsigel,
незачто

flasher167 · #12 (**permalink**) 20.04.2013, 20:00

ой ой ой а такого я не знаю и 1 раз слышу .. и код не напишу...

flasher167 · #13 (**permalink**) 22.04.2013, 19:32

как сжатие сделать?

tsigel · #14 (**permalink**) 23.04.2013, 10:13

Вообщем если не хотите изучать всякие svg и canvas, то есть простой вариант.

При наведении на блок в котором лежит вся окружность слушайте событие mousemove. С помощью координат мыши вы сможете рассчитать когда курсор находится в круге и на каком он секторе (это придется считать самостоятельно без использования события hover, чисто математически это не сложно). Круг состоит из 4 картинок. При наведении на 1 из секторов пропорционально уменьшайте размер картинки и двигайте его к центру окружности. Вот и все.

Или читайте про svg/canvas и задавайте вопросы по ходу разработки.

flasher167 · #15 (**permalink**) 23.04.2013, 17:57

Сообщение от tsigel

Вообщем если не хотите изучать всякие svg и canvas, то есть простой вариант.

При наведении на блок в котором лежит вся окружность слушайте событие mousemove. С помощью координат мыши вы сможете рассчитать когда курсор находится в круге и на каком он секторе (это придется считать самостоятельно без использования события hover, чисто математически это не сложно). Круг состоит из 4 картинок. При наведении на 1 из секторов пропорционально уменьшайте размер картинки и двигайте его к центру окружности. Вот и все.

Или читайте про svg/canvas и задавайте вопросы по ходу разработки.

а что... то что в 1 посте не правильно что ли?

tsigel · #16 (**permalink**) 23.04.2013, 18:26

А оно работает?) Не очень понятно написано, разбираться лень.
Выглядит так, как будто не работает. Особенно тут:

Сообщение от flasher167

<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">

flasher167 · #17 (**permalink**) 23.04.2013, 19:32

он работает.. я проверял но там не то что мне нужно... в коде сектора расширяются, ну а мне нужно сужение ...

flasher167 · #18 (**permalink**) 23.04.2013, 19:43

вот как сделано
опять же повторюсь нужно разместить их по кругу (как нормальный круг разбитый на сектора) и не расширение а сжатие реализовать

tsigel · #19 (**permalink**) 24.04.2013, 09:27

<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><img id="div0" style="border: 0px; position: absolute; left: 100px; top: 100px; width: 200px; height: 200px;" src="0_5.png">
<img id="div1" style="border: 0px; position: absolute; left: 199px; top: 0px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/1_5.png">
<img id="div2" style="border: 0px; position: absolute; left: 1px; top: 0px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/2_5.png">
<img id="div3" style="border: 0px; position: absolute; left: 197px; top: 199px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/3_5.png">
<img id="div4" style="border: 0px; position: absolute; left: -1px; top: 200px; width: 200px; height: 200px;" src="http://tsigelization.narod.ru/temp/4_5.png">
 
        </div> 
        <input type="button" onclick="reset()" value="Reset" style="position: absolute; left: 10; top: 410"> 
     
</body>

Оформляйте свои задачи так. Никому не охота лазить в ваши архивы. Расставить картинки чтобы получился круг можно с помощью css. Дальше все зависит от того на сколько точно вам нужно выполнить наведение. Если вас устраивает погрешность при наведении (я имею в виду ту область тега img где нет картинки, а просто фон), то можно сделать 4 функции с hover. Или 2 функции.

tsigel · #20 (**permalink**) 24.04.2013, 09:53

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<body>
<div style="border: 1px solid gray; position: absolute; left: 0; top: 0; width: 402; height: 402;">
    <script>          
        $(function () {
            $('#div1').hover(function () {
                $(this).stop().animate({
                    'width': '180px',
                    'height': '180px',
                    'top': '20px'
                }, 300)
            }, function () {
                $(this).stop().animate({
                    'width': '200px',
                    'height': '200px',
                    'top': '0px'
                }, 300)
            });
            $('#div2').hover(function () {
                $(this).stop().animate({
                    'width': '180px',
                    'height': '180px',
                    'left': '20px',
                    'top': '20px'
                }, 300)
            }, function () {
                $(this).stop().animate({
                    'width': '200px',
                    'height': '200px',
                    'left': '0px',
                    'top': '0px'
                }, 300)
            });             
            $('#div3, #div4').hover(function () {
                $(this).stop().animate({
                    'width': '180px',
                    'height': '180px'
                }, 300)
            }, function () {
                $(this).stop().animate({
                    'width': '200px',
                    'height': '200px'
                }, 300)
            });
        });
    </script>
    <img id="div1" style="border: 0px; position: absolute; left: 199px; top: 0px; width: 200px; height: 200px;"
         src="http://tsigelization.narod.ru/temp/1_5.png">
    <img id="div2" style="border: 0px; position: absolute; left: 1px; top: 0px; width: 200px; height: 200px;"
         src="http://tsigelization.narod.ru/temp/2_5.png">
    <img id="div3" style="border: 0px; position: absolute; left: 197px; top: 199px; width: 200px; height: 200px;"
         src="http://tsigelization.narod.ru/temp/3_5.png">
    <img id="div4" style="border: 0px; position: absolute; left: -1px; top: 200px; width: 200px; height: 200px;"
         src="http://tsigelization.narod.ru/temp/4_5.png">

</div>
<input type="button" onclick="reset()" value="Reset" style="position: absolute; left: 10; top: 410">
</body>

C нижними сами доделаете.

Форум

Справочник

Discord чат

Курсы javascript