Вход

Просмотр полной версии : Плавное сжимание изображения

flasher167
18.04.2013, 17:26
Есть круг. Он поделен на 4 сектора, нужно что бы при наведении на определенный сектор он начал сжиматься к центру.
Проблема в том что не знаю как сделать сжатие и как разместить изображения по кругу что бы выгладил круг.

<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>
изображения имеют имя 1_5.png 2_5.png и т.д
flasher167
19.04.2013, 15:37
или можно как то по другому это сделать?
danik.js
19.04.2013, 16:29
Например на svg?
tsigel
19.04.2013, 16:31
Или на canvas
Dim@
19.04.2013, 17:01
tsigel,
SVG вроде лучше подходит для этих целей
tsigel
19.04.2013, 17:06
Возможно. Честно говоря я не особо знаю как работать с svg, просто я заметил что некоторые вещи сделанные на нем не работают в некоторых версиях ie (хотя возможно что это по причине криворукости разработчиков), а canvas со скриптом для ie < 9 работает более-менее стабильно (если конечно не считать что скорость работы на ie < 9 оставляет желать лучшего).
Dim@
19.04.2013, 17:12
tsigel,
SVG в ИЕ ВООБЩЕ НЕТ - там есть аналог svg - vmg или что-то типо того
tsigel
19.04.2013, 17:14
То-то оно не работает :haha:
Dim@
19.04.2013, 17:15
tsigel,
На ИЕ либо забивают, либо делают альтернативу;)
tsigel
19.04.2013, 17:17
Dim@,
Спасибо, буду иметь в виду.
Dim@
19.04.2013, 17:19
tsigel,
незачто
flasher167
20.04.2013, 20:00
ой ой ой а такого я не знаю и 1 раз слышу .. и код не напишу...
flasher167
22.04.2013, 19:32
как сжатие сделать?
tsigel
23.04.2013, 10:13
Вообщем если не хотите изучать всякие svg и canvas, то есть простой вариант.

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

Или читайте про svg/canvas и задавайте вопросы по ходу разработки.
flasher167
23.04.2013, 17:57
Вообщем если не хотите изучать всякие svg и canvas, то есть простой вариант.

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

Или читайте про svg/canvas и задавайте вопросы по ходу разработки.
а что... то что в 1 посте не правильно что ли?
tsigel
23.04.2013, 18:26
А оно работает?) Не очень понятно написано, разбираться лень.
Выглядит так, как будто не работает. Особенно тут:
<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
23.04.2013, 19:32
он работает.. я проверял но там не то что мне нужно... в коде сектора расширяются, ну а мне нужно сужение ...
flasher167
23.04.2013, 19:43
вот как сделано
опять же повторюсь нужно разместить их по кругу (как нормальный круг разбитый на сектора) и не расширение а сжатие реализовать
tsigel
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
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 нижними сами доделаете.