Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Согласованное движение нескольких объектов. (https://javascript.ru/forum/misc/13151-soglasovannoe-dvizhenie-neskolkikh-obektov.html)

monolithed 17.11.2010 23:02

Ну по диагонали тоже не так сложно:


<style type="text/css">
div {
    background: blue;
    position: absolute;
    color: white;
    text-align: center;
    width: 50px;
    height: 50px;
}
</style>

<script type="text/javascript">
window.onload = function(){
    var i = 0;
    (function(){
        if(++i <= 100){
           var element =  document.getElementsByTagName('div')[0];
           element.style.cssText = 'top:'+i+'px; left:'+i+'px';
           setTimeout(arguments.callee, 10);
        }
    })();
};
</script>
<div></div>

ksa 18.11.2010 08:59

Цитата:

Сообщение от kalach
А можно с примером?

Вот например...

ksa 18.11.2010 09:05

Цитата:

Сообщение от kalach
Назвал объектом, тк над ним потом буду совершать действие.

Селектор от этого объектом не стал. :) Не стоит использовать термины языков абы как... Будет путаница как минимумю
Цитата:

Сообщение от kalach
вот как над ней потом совершать действия? К тому же селектору-"объекту" гораздо легче прописать начальные координаты и расставить их в нужном порядке

Если правильно выбрать селекторы и задать им нужные свойства - будет все просто.
И расставляешь ты не селекторы... А некие элементы в ХТМЛ. :) Сейчас примерчик чёле сделаю, раз ты ленишся это делать...

ksa 18.11.2010 09:13

Пример...

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
.box {
	position: absolute;
	width: 100px;
	height: 100px;
}
#item1 {
	top: 10px;
	left: 10px;
	background-color: blue;
}
#item2 {
	top: 100px;
	left: 200px;
	background-color: red;
}
#item3 {
	top: 50px;
	left: 350px;
	background-color: orange;
}
</style>
</head>
<body>
<div class='box' id='item1'></div>
<div class='box' id='item2'></div>
<div class='box' id='item3'></div>
</body>
</html>

- Поставь ДИВам нужные размеры
- Картинку свою бекграундом
- Поставь в нужные места
и таки двигай их себе на здоровье

document.getElementById('item1').style.top=<нужное_значение>
document.getElementById('item1').style.left=<нужное_значение>

kalach 18.11.2010 18:07

ksa, большое спасибо! И за ссылку, и особенно за пример. Напишу в комментариях твой ник :)

ksa 18.11.2010 19:06

Цитата:

Сообщение от kalach
большое спасибо

Таки не прибавилось... :)
Цитата:

Сообщение от kalach
Напишу в комментариях твой ник

Такого для меня еще никто не делал... Я польщен. :)


Часовой пояс GMT +3, время: 17:22.