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, время: 06:06. |