| 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 и т.д |