Плавное сжимание изображения
Есть круг. Он поделен на 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 и т.д |
или можно как то по другому это сделать?
|
Например на svg?
|
Или на canvas
|
tsigel,
SVG вроде лучше подходит для этих целей |
Возможно. Честно говоря я не особо знаю как работать с svg, просто я заметил что некоторые вещи сделанные на нем не работают в некоторых версиях ie (хотя возможно что это по причине криворукости разработчиков), а canvas со скриптом для ie < 9 работает более-менее стабильно (если конечно не считать что скорость работы на ie < 9 оставляет желать лучшего).
|
tsigel,
SVG в ИЕ ВООБЩЕ НЕТ - там есть аналог svg - vmg или что-то типо того |
То-то оно не работает :haha:
|
tsigel,
На ИЕ либо забивают, либо делают альтернативу;) |
Dim@,
Спасибо, буду иметь в виду. |
tsigel,
незачто |
ой ой ой а такого я не знаю и 1 раз слышу .. и код не напишу...
|
как сжатие сделать?
|
Вообщем если не хотите изучать всякие svg и canvas, то есть простой вариант.
При наведении на блок в котором лежит вся окружность слушайте событие mousemove. С помощью координат мыши вы сможете рассчитать когда курсор находится в круге и на каком он секторе (это придется считать самостоятельно без использования события hover, чисто математически это не сложно). Круг состоит из 4 картинок. При наведении на 1 из секторов пропорционально уменьшайте размер картинки и двигайте его к центру окружности. Вот и все. Или читайте про svg/canvas и задавайте вопросы по ходу разработки. |
Цитата:
|
А оно работает?) Не очень понятно написано, разбираться лень.
Выглядит так, как будто не работает. Особенно тут: Цитата:
|
он работает.. я проверял но там не то что мне нужно... в коде сектора расширяются, ну а мне нужно сужение ...
|
Вложений: 1
вот как сделано
опять же повторюсь нужно разместить их по кругу (как нормальный круг разбитый на сектора) и не расширение а сжатие реализовать |
<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 функции. |
<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 нижними сами доделаете. |
| Часовой пояс GMT +3, время: 22:33. |