Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
1

Плавное сжимание изображения

19.04.2013, 15:37. Показов 1490. Ответов 17
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Есть круг. Он поделен на 4 сектора, нужно что бы при наведении на определенный сектор он начал сжиматься к центру.
Проблема в том что не знаю как сделать сжатие и как разместить изображения по кругу что бы выгладил круг.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<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>
Добавлено через 22 часа 58 минут
или можно как то по другому это сделать?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 19.04.2013, 15:37
Ответы с готовыми решениями:

Плавное уменьшение изображения
помогите плз, нужно реализовать плавное уменьшение изображения, вот код(при наведение курсора мыши...

Плавное увеличение изображения по нажатии на кнопку
Помогите сделать плавное увеличение изобржения по нажатию на кнопку. В нете нашёл только при...

Плавное увеличение и уменьшение изображения
Вечер добрый, есть такой код: .entry-thumbnail:hover{ transform: scale(1.1); overflow:...

Плавное движение изображения за мышкой
не подскажите как заставить картинку двигаться за мышкой,не тупо двигалась под мышкой, а чтобы...

17
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
22.04.2013, 19:32  [ТС] 2
как сжатие сделать?
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
22.04.2013, 20:42 3
опишите словами - что вы понимаете под "сжатием сектора к центру"
я пока не могу себе представить, что именно вам нужно

-- у сектора имеются две величины, определяющие его геометрию:
(1) радиус и (2) угол
опишите, что должно происходить с первым и со вторым в "процессе сжатия"
-- кроме того, опишите - изменится ли (и как) положение сектора относительно центра круга в процессе "сжатия к центру"
0
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
22.04.2013, 22:07  [ТС] 4
попробуйте данный код который я описал в 1 посте ... она показывает как картинка( сектор с определенным цветом начинает увеличиваться в размере) это и есть расширение .. мне нужен подобный эффект только в обратном порядке.. когда сектора имеют максимальный размер но потом они уменьшают свои показатели по высоте и ширине .... центр круга не должен изменятся ..
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
22.04.2013, 22:28 5
flasher167, скопируйте вами выложенный код и запустите его в браузере AS IS
если вы что-либо сможете "увидеть", то я вам позавидую

у нас у всех НЕТ ваших картинок src = i + "_" + n + ".png"
поэтому ваш код всем нам НИЧЕГО не показывает
СОВСЕМ ничего

так что... если нуждаетесь в помощи, будьте любезны описать вашу проблему
0
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
22.04.2013, 23:16  [ТС] 6
я описал все что мог...
есть сектора при наведении на определенный сектор он уменьшается.. убрали мышку с сектора (уменьшении остановилось) также создана кнопка которая возвращает все в исходное состояние..
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
22.04.2013, 23:21 7
мда... трудно с вами

"сектор уменьшается" - это КАК?
становится меньше радиус сектора?
или угол сектора меньше становится?
или и то, и другое одновременно уменьшается?

русский язык - он для вас родной?
вы в состоянии воспринимать поставленные на русском языке вопросы?
и в состоянии русским языком на эти вопросы адекватно отвечать?
0
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
22.04.2013, 23:27  [ТС] 8
уменьшается радиус
Миниатюры
Плавное сжимание изображения  
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
23.04.2013, 00:06 9
средствами чистого HTML+CSS+javascript эту задачу решить нельзя
здесь надо использовать графические методы - VML для MSIE и SVG для прочих браузеров
рекомендую воспользоваться js-библиотекой http://raphaeljs.com/
там даже есть демо-пример с секторами - http://raphaeljs.com/pie.html, правда, при наведении мыши они не "сжимаются", а, наоборот, "расширяются"
0
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
23.04.2013, 00:26  [ТС] 10
попробуйте пример который я привел в 1 посте.. создайте картинки и посмотрите как работает..
работает без всяких графических методов..
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
23.04.2013, 00:33 11
Цитата Сообщение от flasher167 Посмотреть сообщение
создайте картинки и посмотрите как работает..
смешно...
вы в "Аншлаге" выступать не пробовали?
попроситесь, вас обязательно возьмут

откуда я знаю - какие именно картинки мне надо создавать, чтобы увидеть то, чего вы в своём примере видите?

хотите похвалиться - если вам реально есть чем похвалиться - выложите в сеть и дайте ссылку
0
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
23.04.2013, 02:01 12
Цитата Сообщение от kalabuni Посмотреть сообщение
средствами чистого HTML+CSS+javascript эту задачу решить нельзя
смотри умник
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #Circle > div{
            width: 50%;
            height: 50%;
        }
        #sectorTR{
            background-color: black;
            border-top-left-radius: 100%;
            -webkit-border-top-left-radius: 100%;
            -moz-border-radius-topleft: 100%;
            position: absolute;
            bottom: 50px;
            right: 50px;
        }
        #sectorTL{
            background-color: red;
            border-top-right-radius: 100%;
            -webkit-border-top-right-radius: 100%;
            -moz-border-radius-topright: 100%;
            position: absolute;
            bottom: 50px;
            left: 50px;
        }
        #sectorBL{
            background-color: green;
            border-bottom-left-radius: 100%;
            -webkit-border-bottom-left-radius: 100%;
            -moz-border-radius-bottomleft: 100%;
            position: absolute;
            top: 50px;
            right: 50px;
        }
        #sectorBR{
            background-color: blue;
            border-bottom-right-radius: 100%;
            -webkit-border-bottom-right-radius: 100%;
            -moz-border-radius-bottomright: 100%;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        #Circle{
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            -ms-border-radius: 50px;
            border-radius: 50px;
            position: relative;
        }
    </style>
</head>
<body>
<div id="Circle">
    <div id="sectorTR"></div>
    <div id="sectorTL"></div>
    <div id="sectorBR"></div>
    <div id="sectorBL"></div>
</div>
<script type="text/javascript">
    var Circle=document.getElementById("Circle");
    Circle.onmouseover=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.compress=function (elem)
        {
            var timer=setInterval(compressStep,40);
            function compressStep()
            {
                if(!elem.state)
                    return clearInterval(timer);
                var d=elem.style.width=elem.offsetWidth-1+"px";
                elem.style.height=elem.offsetHeight-1+"px"
                if(elem.offsetHeight<=0)
                {
                    elem.style.width= elem.style.height="0px";
                    elem.state=true;
                }
            }
        }
        if(target.offsetParent==Circle)
        {
            target.state=true;
            target.compress(target);
        }
    }
    Circle.onmouseout=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.restore=function (elem)
        {
            var timer=setInterval(restoreStep,40);
            function restoreStep()
            {
                if(elem.state)
                    return clearInterval(timer);
                elem.style.width=elem.offsetWidth+1+"px";
                elem.style.height=elem.offsetHeight+1+"px";
                if(elem.offsetHeight>=50)
                {
                    elem.style.width= elem.style.height="50px";
                    elem.state=true;
                }
            }
        }
        if(target.offsetParent==Circle)
        {
            target.state=false;
            target.restore(target);
        }
    }
</script>
</body>
</html>
правда не легко но можно.
1
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
23.04.2013, 02:29 13
решить можно в единственном частном случае - если углы секторов будут равны ровно 90 или 180 градусам

во всех иных случаях с помощью HTML+CSS+JS задачу решить нельзя
о чём мною и было написано

PS. "тыкать" рекомендую где-нить в подворотне вашим дружкам-гопникам
0
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
23.04.2013, 03:32 14
flasher167, с картинками тоже можно.Если сам не разберешся скинь картинки которые хотел, подстрою.Да и эффекты тоже.

Добавлено через 56 минут
вы написали <<средствами чистого HTML+CSS+javascript !!!!!!!!!ЭТУ!!!!!!!!! задачу решить нельзя>>, а в этой задаче углы именно 90 градусов.так что не надо оправдываться.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
23.04.2013, 05:27 15
откуда вам известно, что в этой задаче 4 сектора имеют углы именно 90 градусов?

круг на 4 сектора можно разделить бесчисленным количеством способов
подставьте сюда любые возможные значения w + x + y + z = 360
0
4 / 4 / 2
Регистрация: 17.10.2012
Сообщений: 176
23.04.2013, 19:43  [ТС] 16
Цитата Сообщение от arto333 Посмотреть сообщение
смотри умник
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #Circle > div{
            width: 50%;
            height: 50%;
        }
        #sectorTR{
            background-color: black;
            border-top-left-radius: 100%;
            -webkit-border-top-left-radius: 100%;
            -moz-border-radius-topleft: 100%;
            position: absolute;
            bottom: 50px;
            right: 50px;
        }
        #sectorTL{
            background-color: red;
            border-top-right-radius: 100%;
            -webkit-border-top-right-radius: 100%;
            -moz-border-radius-topright: 100%;
            position: absolute;
            bottom: 50px;
            left: 50px;
        }
        #sectorBL{
            background-color: green;
            border-bottom-left-radius: 100%;
            -webkit-border-bottom-left-radius: 100%;
            -moz-border-radius-bottomleft: 100%;
            position: absolute;
            top: 50px;
            right: 50px;
        }
        #sectorBR{
            background-color: blue;
            border-bottom-right-radius: 100%;
            -webkit-border-bottom-right-radius: 100%;
            -moz-border-radius-bottomright: 100%;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        #Circle{
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
            -ms-border-radius: 50px;
            border-radius: 50px;
            position: relative;
        }
    </style>
</head>
<body>
<div id="Circle">
    <div id="sectorTR"></div>
    <div id="sectorTL"></div>
    <div id="sectorBR"></div>
    <div id="sectorBL"></div>
</div>
<script type="text/javascript">
    var Circle=document.getElementById("Circle");
    Circle.onmouseover=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.compress=function (elem)
        {
            var timer=setInterval(compressStep,40);
            function compressStep()
            {
                if(!elem.state)
                    return clearInterval(timer);
                var d=elem.style.width=elem.offsetWidth-1+"px";
                elem.style.height=elem.offsetHeight-1+"px"
                if(elem.offsetHeight<=0)
                {
                    elem.style.width= elem.style.height="0px";
                    elem.state=true;
                }
            }
        }
        if(target.offsetParent==Circle)
        {
            target.state=true;
            target.compress(target);
        }
    }
    Circle.onmouseout=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.restore=function (elem)
        {
            var timer=setInterval(restoreStep,40);
            function restoreStep()
            {
                if(elem.state)
                    return clearInterval(timer);
                elem.style.width=elem.offsetWidth+1+"px";
                elem.style.height=elem.offsetHeight+1+"px";
                if(elem.offsetHeight>=50)
                {
                    elem.style.width= elem.style.height="50px";
                    elem.state=true;
                }
            }
        }
        if(target.offsetParent==Circle)
        {
            target.state=false;
            target.restore(target);
        }
    }
</script>
</body>
</html>
правда не легко но можно.
хороший пример, но не то что надо...
сжатие должно останавливаться когда курсор убран с сектора и нудна кнопка сброса что бы вернуть все в исходное положение
вот как сделано
опять же повторюсь нужно разместить их по кругу (как нормальный круг разбитый на сектора) что не получается у меня.. и сделать сжатие
Вложения
Тип файла: rar ыы.rar (5.5 Кб, 4 просмотров)
0
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
23.04.2013, 19:58 17
kalabuni специально для вас
Цитата Сообщение от kalabuni Посмотреть сообщение
решить можно в единственном частном случае - если углы секторов будут равны ровно 90 или 180 градусам
смотри
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #Circle > div:not(#sectorR){
            width: 50%;
            height: 50%;
        }
        #sectorTL{
            background-color: black;
            border-top-left-radius: 100%;
            -webkit-border-top-left-radius: 100%;
            -moz-border-radius-topleft: 100%;
            position: absolute;
            bottom: 50%;
            right: 50%;
        }
        #sectorTR{
            background-color: red;
            border-top-right-radius: 100%;
            -webkit-border-top-right-radius: 100%;
            -moz-border-radius-topright: 100%;
            position: absolute;
            bottom: 50%;
            left: 50%;
        }
        #sectorBL{
            background-color: green;
            border-bottom-left-radius: 100%;
            -webkit-border-bottom-left-radius: 100%;
            -moz-border-radius-bottomleft: 100%;
            position: absolute;
            top: 50%;
            right: 50%;
        }
        #sectorBR{
            background-color: blue;
            border-bottom-right-radius: 100%;
            -webkit-border-bottom-right-radius: 100%;
            -moz-border-radius-bottomright: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
        }
        #sectorRM{
            position: absolute;
            border-bottom-right-radius: 100%;
            -webkit-border-bottom-right-radius: 100%;
            -moz-border-radius-topright: 100%;
            width: 100%;
            height: 100%;
            background-color: orange;
            z-index: 5;
        }
        #rot{
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg)
            -o-transform: rotate(-45deg);
            -ms-transform:rotate(-45deg);
            filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
            zoom:1;
            border-bottom-right-radius: 100%;
            -webkit-border-bottom-right-radius: 100%;
            -moz-border-radius-bottomright: 100%;
            position: absolute;
            background-color: #ffffff;
            top: 25%;
            left: 60.5%;
            z-index: 2;
        }
        #Circle{
            width: 500px;
            height: 500px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            border-radius: 50%;
            position: relative;
        }
    </style>
</head>
<body>
<div id="Circle">
    <div id="sectorTR"></div>
    <div id="sectorTL"></div>
    <div id="sectorBR"></div>
    <div id="sectorBL"></div>
    <div id="rot">
        <div id="sectorRM"></div>
    </div>
 
</div>
<script type="text/javascript">
    var Circle=document.getElementById("Circle");
    var sectorRM=document.getElementById("sectorRM");
    var radMax=Circle.offsetHeight/2;
    var radMin=0;
    Circle.onmouseover=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.compress = function (elem) {
            var timer = setInterval(compressStep, 4);
 
            function compressStep() {
                if (!elem.state)
                    return clearInterval(timer);
                var d = elem.style.width = elem.offsetWidth - 1 + "px";
                elem.style.height = elem.offsetHeight - 1 + "px"
                if (elem.offsetHeight <= radMin) {
                    elem.style.width = elem.style.height = radMin+"px";
                    elem.state = true;
                }
            }
        };
        if(target.offsetParent==Circle&&target!=rot||target==sectorRM)
        {
            target.state=true;
            target.compress(target);
        }
    }
    Circle.onmouseout=function(event)
    {
        event=event||window.event;
        var target=event.target||event.srcElement;
        target.restore=function (elem)
        {
            var timer=setInterval(restoreStep,4);
            function restoreStep()
            {
                if(elem.state)
                    return clearInterval(timer);
                elem.style.width=elem.offsetWidth+1+"px";
                elem.style.height=elem.offsetHeight+1+"px";
                if(elem.offsetHeight>=radMax)
                {
                    elem.style.width= elem.style.height=radMax+"px";
                    elem.state=true;
                }
            }
        }
        if(target.offsetParent==Circle&&target!=rot||target==sectorRM)
        {
            target.state=false;
            target.restore(target);
        }
    }
</script>
</body>
</html>
0
26 / 16 / 2
Регистрация: 13.03.2013
Сообщений: 36
23.04.2013, 20:52 18
подключи нормальные картинки размером 200x200 а то у тебя не квадратные.
Вложения
Тип файла: rar lock1.rar (933 байт, 6 просмотров)
1
23.04.2013, 20:52
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 23.04.2013, 20:52
Помогаю со студенческими работами здесь

Сжимание массива
Помогите пожалуйста, не могу сжать нули. Задача такова дан массив с большим кол-вом 0, необходима...

Сжимание > обратное действие
Добрый день. Подскажите как сжимать и &quot;разжимать&quot; с применением boost zlib? То есть, мне нужно...

Float и сжимание блока перед переносом
Как сделать так, чтобы зафлоаченый элемент при уменьшении экрана переносился только после...

Отрисовка изображения поверх канвы (изображения) и вращение изображения
Здравствуйте. Столкнулся с 2умя проблемами при работе с изображениями средствами C++ Builder....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru