Согласованное движение нескольких объектов.
HTML-страница с JavaScript должна содержать 25 небольших изображений .bmp формата, расположенных пять на пять, и кнопки. По нажатию на кнопку картинки нижней и правой грани должны двигаться по диагонали вверх и налево, пока не сольются с левой и верхней гранью.
|
kalach, и в чем проблема?
|
Проблема номер 1: создание объекта, над которым будет совершать действие функция движения. Например, я могу создать объект прямо в документе
<style> #image01 { position: absolute; top: 200px; left: 10px; background: #FFffFF; padding: 15px; } </style> получиться точь в точь нужная мне картинка, но необходимо использовать уже имеющиеся .бмп картинки. |
Проблема номер 2:
Я знаю скрипты, чтобы двигать картинки по горизонтали, а нет ли такого скрипта, что бы задать им конечные координаты, к которым нужно прямолинейно двигаться? |
Проблема номер 3:
У меня есть кнопка, но когда я добавляю в функцию onClick, она понимает это как клик по изображению, а не по кнопке. |
Цитата:
Таки это селектор идентификатора с его свойствами и их значениями... Цитата:
|
Цитата:
|
Цитата:
|
Таки это селектор идентификатора с его свойствами и их значениями.
Назвал объектом, тк над ним потом буду совершать действие. Что мешает добавить картинку бекграундом? Могу просто добавить картинку на страницу. А вот как над ней потом совершать действия? К тому же селектору-"объекту" гораздо легче прописать начальные координаты и расставить их в нужном порядке, а картинки получается расставить только таблицей. Интересно было бы такое посмотреть. Вс-всё, тут разобрался, просто криво команды понаписал, сорри. |
В ЦСС3 такое уже есть...
А можно с примером? Вот заставить картинку гонять по горизонтали туда-сюда - запросто <script language="JavaScript"> var slidepos = 10; var slidediv = document.getElementById('image01'); var sliding = false; function slide() { sliding = clearInterval(sliding); sliding = setInterval(function() { if( slidepos < 600 ) { slidepos++; slidediv.style.left = slidepos; } else { sliding = clearInterval(sliding); } }, 5 ); } </script> А вот скриптов, чтобы указывать место назначения - не знаю. |
Ну по диагонали тоже не так сложно:
<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>
|
Цитата:
|
Цитата:
Цитата:
И расставляешь ты не селекторы... А некие элементы в ХТМЛ. :) Сейчас примерчик чёле сделаю, раз ты ленишся это делать... |
Пример...
<!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=<нужное_значение>
|
ksa, большое спасибо! И за ссылку, и особенно за пример. Напишу в комментариях твой ник :)
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 02:43. |