VPF::Перемещение объекта внутри div`a

PROhvost

Дата 20.6.2007, 14:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет

Есть код, по кликам перемещает объект вправо или влево.

Код


<script language=JavaScript>

        var p = new Array(0,10);
        
        function left() {
        p[1]-=10;
        document.getElementById('test').style.left = +p[1]+'px';
        }

        function right() {
        p[0]+=10;
        document.getElementById('test').style.left = +p[0]+'px';
        }

</script>

<div style="width: 400px; height: 60px; background: #ccc; overflow: hidden;">
<div id="test" style="width: 300px; height: 60px; position: relative; background: #cceeee;"></div>
</div>
<span style="cursor:pointer;" onclick="left()">Left</span>
<span style="cursor:pointer;" onclick="right()">Right</span>

Есть проблема, когда подвигаешь объект в какую либо сторону несколькими кликами, после смены направления он перескакивает на исходное положение и оттуда начинает движение в другую сторону.

ksnk

Дата 20.6.2007, 14:12 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Попробуй вместо массива завести только одну переменную...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

PROhvost

Дата 20.6.2007, 17:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет

ksnk, спасибо за подсказку, так работает:

Код


<script language=JavaScript>
        p = 0;
        function left() {
        p-=10;
        document.getElementById('test').style.left = +p+'px';
        }
        function right() {
        p+=10;
        document.getElementById('test').style.left = +p+'px';
        }
</script>
<div style="width: 400px; height: 60px; background: #ccc; overflow: hidden;">
<div id="test" style="width: 300px; height: 60px; position: relative; background: #cceeee;"></div>
</div>
<span style="cursor:pointer;" onclick="left()">Left</span>
<span style="cursor:pointer;" onclick="right()">Right</span>

Это сообщение отредактировал(а) PROhvost - 24.6.2007, 17:13

PROhvost

Дата 27.6.2007, 10:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 42
Регистрация: 16.2.2006

Репутация: нет
Всего: нет

Конечный результат, может быть кому-нибудь пригодится:

Код


<script type="text/javascript">

        rl = 0;
        
        function right() {
        rl+=50;
        document.getElementById('test').style.left = +rl+'px';
        if (rl>349) {document.getElementById('right').disabled = true;}
        if (rl>-299) {document.getElementById('left').disabled = false;}
        }
        function left() {
        rl-=50;
        document.getElementById('test').style.left = +rl+'px';
        if (rl<349) {document.getElementById('right').disabled = false;}
        if (rl<-299) {document.getElementById('left').disabled = true;}
        }
        
        ud = 0;
        
        function up() {
        ud-=50;
        document.getElementById('test').style.top = +ud+'px';
        if (ud<349) {document.getElementById('down').disabled = false;}
        if (ud<-299) {document.getElementById('up').disabled = true;}
        }
        function down() {
        ud+=50;
        document.getElementById('test').style.top = +ud+'px';
        if (ud>349) {document.getElementById('down').disabled = true;}
        if (ud>-299) {document.getElementById('up').disabled = false;}
        }

</script>

<div style="width: 400px; height: 400px; background: #ccc; overflow: hidden;">
<div id="test" style="width: 300px; height: 300px; position: relative; background: #ccffff;"></div>
</div>
<input id="left" type="button" style="cursor:pointer;" onclick="left()" value="Left" />
<input id="right" type="button" style="cursor:pointer;" onclick="right()" value="Right" />
<input id="up" type="button" style="cursor:pointer;" onclick="up()" value="Up" />
<input id="down" type="button" style="cursor:pointer;" onclick="down()" value="Down" />

Это сообщение отредактировал(а) PROhvost - 28.6.2007, 08:43

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »