Сообщение от Sweet
|
1. Первый день замужем что ли? Почему код неотформатирован???
2. Спроси на той помойке, где был найден сей скриптишко.
|
Спрашиваете, как с больного здоровье. К тому же псы брешут деликатнее. Противно. А ещё профессор...
|
Сообщение от Леночка
|
|
как сделать чтобы каждые пол секунды цикл продолжил свое движение по часовой стрелке?
|
По секунде вот так. Иллюстрирует скорее общие принципы подходов, чем результат в дизайнерском смысле.
Для получения более ровной картинки следует пересчитывать координаты не для левого-верхнего угла, а для центра объекта. Движение по прямой тоже не самый лучший вариант. Зато простой, легко показать.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ёрзают мышки ;-? </title>
<script type="text/javascript">
// Одна функция на все однотипные действия с объектом
function mouse(){
// переменные для значения шага по горизонтали и вертикали
var horstep, verstep
// этот цикл переберёт однотипные объекты
for(var i = 1; i < 5; ++i){
// получаем объект по Id
var mnode = document.getElementById("mouse" + i)
// значения границ с отсечённым суффиксом размерности ("px")
var left = parseInt(mnode.style.left)
var top = parseInt(mnode.style.top)
// алгоритм назначения величин шагов может быть сложнее
if(top >= 200) horstep = -3 // в нижней половине области ёрзаем влево
else horstep = 3 // наверху - вправо
if(left >= 250) verstep = 3 // в правой половине области едем вверх
else verstep = -3 // слева - вниз
// снова собираем величину для границы
mnode.style.top = top + verstep + "px" // Величина должна быть строкой из числа и суффикса
mnode.style.left = left + horstep + "px" // сначала вычисляется число, затем происходит конкатенация
}
setTimeout(mouse, 1000) // повторим через секунду
}
</script>
<style type="text/css">
img{/*стиль картинки задаёт её размер*/
width: 100px;
height: 150px;
}
div {/*позиция определяется вмещающим блоком*/
position: absolute;
border: solid gray 1px;/*рамка необязательна.
Даёт наглядность в отсутствии картинок*/
}
</style>
</head>
<body>
<!--элементы спрятаны во вмещающие блоки-->
<div id="mouse1" style="top:0;left:250px">
<img alt="mouse1" src="10.gif" />
<!--Управлять стилями вмещающих блоков удобнее,
чем свойствами картинок напрямую-->
</div>
<div id="mouse2" style="top:400px;left:250px"><img alt="mouse2" src="11.gif"/></div>
<div id="mouse3" style="top:200px;left:450px"><img alt="mouse3" src="12.gif"/></div>
<div id="mouse4" style="top:200px;left:50px"><img alt="mouse4" src="13.gif"/></div>
<script type ="text/javascript">
mouse() // скрипт в конце документа - хорошая альтернатива обработчику события onLoad
</script>
</body>
</html>