Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Линейное движение объекта(рисунка)

Автор: Гость_eugene 20.9.2005, 12:54

В одном из учебников нашел следующий скрипт:

Код


<html>
<head>
  <title>Линейное движение объекта</title>
</head>
<body>
<img id="myimg" src="img/als.gif" STYLE="position:absolute; top:10; left:20">
<script language="javascript">
function init_move(){
dx=8//приращение по y
dy=3//приращение по x
setInterval("move()",200)//периодический вызов функции
move()
}
function move(){//изменение координат отображения
/*Текущие координаты*/
var y=parseInt(document.all.myimg.style.top)
var x=parseInt(document.all.myimg.style.left)
/*Новые координаты*/
[color=red]document.all.myimg.style.top=y+dy[/color]
document.all.myimg.style.left=x+dx
}
init_move()//Начинаем движение
</script>
</body>
</html>

Когда запускаю страницу IE6.0, то получаю следующее сообщение:

Недопустимый аргумент в строке 20(выделена красным цветом(см. выше))символ 1. Где ошибка? Подскажите пожалуйста.
P.S. Сама картинка отображается, но она не перемещается. А должна бы...

Автор: Aliance 20.9.2005, 13:41

Пользуйся подсветкой правильно. Используй предпросмотр твоих сообщений.
И привыкай ставить точки с запятой в конце КАЖДОЙ строчки.

Автор: Sardar 21.9.2005, 00:19

Ну IE же говорит на какой строчке ошибка, осталось только посмотреть smile

Строчка 19:

Код

[color=red]document.all.myimg.style.top=y+dy[/color]

Ты нарочно BB теги поставил?

Замени все document.all на document.getElementById.

Автор: Гость_eugene 21.9.2005, 05:45

Цитата(Sardar @ 21.9.2005, 00:19)

Замени все document.all на document.getElementById.

Заменил. Что-то типа такого:

Код


17.var y=parseInt(document.getElementById("myimg").style.top)
18.var x=parseInt(document.getElementById("myimg").style.left)
19.document.getElementById("myimg").style.top=y+dy
20.document.getElementById("myimg").style.left=x+dx

В итоге выдается ошибка строка 19: Недопустимый аргумент.
Может у что-то со строкой 6 не то? Дело в том, что как я не менял параметры left и top, на внешнем виде страницы это никак не отражалось.

Код


6.<img id="myimg" src="img/als.gif" STYLE="position:absolute; top:10; left:20">

!	Еще раз повторяю: пользуйся подсветкой правильно!

Автор: Sardar 21.9.2005, 18:42

Цитата

В итоге выдается ошибка строка 19: Недопустимый аргумент.

Обмозгуй ошибку, вспомни про alert, узнаешь что присваиваешь ты полю NaN smile

Проблема в том, что при первом обращении к style.top|left ты получишь пустую строку, в итоге NaN. В ИЕ есть currentStyle и runtimeStyle, остальные в отстое по моему. Также читай лучше scrollTop и scrollLeft, сразу число, если слой на абсолютной позиции, то получишь координаты от document.documentElement.

Автор: Throne 21.12.2006, 13:16

Тут воспользовался этим кодом, подправил, дополнил; кому интересно — посмотрите smile

Код


<html>
<head>
  <title>Совсем не линейное движение объекта</title>
</head>
<body>
<div id="myimg" STYLE="position:absolute; top:150; left:0;">
<img src="2.jpg" onmouseover="stop=1" border="0">
</div>
<script language="javascript" type="text/javascript">
var dx=10, dy=10, stop=0;
function timetomove(time){
setTimeout ("init_move()",time);
}
function init_move(){
document.all.myimg.style.left=-0;
setInterval ("move()",15);
}
function move(){
var y=parseInt(document.all.myimg.style.top);
var x=parseInt(document.all.myimg.style.left);
document.all.myimg.style.top=y+dy;
document.all.myimg.style.left=x+dx;
xp=parseInt(document.all.myimg.style.left);
yp=parseInt(document.all.myimg.style.top);
if (stop==1) {
dx=1;
dy=1;
}
if (xp > 153) {
dx=dx-1;
}
if (xp < -0) {
dx=dx+1;
}
if (yp > 150) {
dy=dy-1;
}
if (yp < 0) {
dy=dy+1;
}
}
timetomove(2500);
</script>
</body>
</html>

З.Ы. Вот тока не проверял на совместимость со всеми браузерами, если где-то выдает ошибку — скажите пожалуйста какую и как исправить. Заранее спасибо

Автор: Aliance 21.12.2006, 13:47

Если вижу в скрипте document.all (с небольшим исключение) сразу же закрываю скрипт и никогда к нему не возвращаюсь. Когда вы уже научитесь писать кроссбраузерные скрипты?

Автор: AKS 21.12.2006, 15:28

Похвастаюсь и я тем, как освоил скрипты из учебников (как тут удержаться, движение картинок на странице - любимое занятие smile

).
Движение уже не линейное, а как у Throne, по окружности. Но, думаю, автору темы это пригодится.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ru'>
<head>
<title>test</title>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
/*<![CDATA[*/
#test {
  position:absolute;
  top:0;
  left:200px;
  width:30px;
  height:30px;
  background-color:black;
}
/*]]>*/
</style>
</head>
<body>
    <div id='test' onmouseout='startMove()' onmouseover='stopMove()'></div>
<script type='text/javascript'>
/*<![CDATA[*/
var satellite = document.getElementById('test'),
    angle = 0, // стартовая позиция на воображаемой окружности
    step = 10, // шаг движения
    direction = -1, // по "часовой" или против
    orbit = parseInt(satellite.offsetLeft), // радиус окружности
    start_X = start_Y = orbit,
    pi = Math.PI/180,
    interval = 0;

setTimeout(startMove, 500);

function startMove() {
    interval = setInterval(move, 100);
}
function stopMove() {
    clearInterval(interval);
}
function move() {
    angle += step;
    if (angle >= 360)
        angle = 0;
    var x = start_X - (orbit * Math.sin(angle * pi) * direction),
        y = start_Y - orbit * Math.cos(angle * pi);
    satellite.style.left = x + 'px';
    satellite.style.top = y + 'px';
}
/*]]>*/
</script>
</body>
</html>

Замечание!!! Никогда не используйте глобальные переменные таким неразумным способом, как в этом сценарии.

Автор: eee 18.5.2008, 17:13

взял скрипт автора топа, немного переделал:

Код


<button onclick="init_move()">click2move</button>
<img id="myimg" src="logo.gif" STYLE="position:absolute; top:100; left:0">

Код


function init_move(){
    dx=1;//приращение по y
    setInterval("move()",10);//периодический вызов функции
    move();
}
function move(){//изменение координат отображения
/*Текущие координаты*/
    var x=parseInt(document.getElementById('myimg').style.left);
/*Новые координаты*/
    if (x<400) document.getElementById('myimg').style.left=x+dx;
}

т.е. при нажатии на кнопке, начинается горизонтальное движение пока не достигнет 400й координаты.

но тут возникла другая проблема, закинул этот скрипт в другой документ, который является у меня на странице является фреймом.
задача элементарная - все тоже самое, вместо кнопки - ссылка, а начальные координаты картинки за пределами экрана, и движение начинается при наведении на ссылку

Код


<table cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" width="20%"><a href="" class="x" onmouseover="init_move()">Статьи</a></td>
    <td align="center" width="20%"><a href="" class="x" id="imgs">Изображения</a></td>
    <td align="center" width="20%"><a href="" class="x" id="sft">Софт</a></td>
    <td align="center" width="20%"><a href="" class="x" id="bks">Книги</a></td>
    <td align="center" width="20%"><a href="" class="x" id="clg">Каталог</a></td>
  </tr>
</table>
<img id="myimg" src="logo.gif" STYLE="position:absolute; top:100; left:-180;">

скрипт же остался без изменений, но работать не хочет!подскажите?