Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Перемещение объекта внутри div`a


Автор: PROhvost 20.6.2007, 14:00
Есть код, по кликам перемещает объект вправо или влево.
Код

<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
Попробуй вместо массива завести только одну переменную...

Автор: PROhvost 20.6.2007, 17:41
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 27.6.2007, 10:25
Конечный результат, может быть кому-нибудь пригодится:
Код

<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" />

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)