Перемещение массива картинок

Статус
Закрыто для дальнейших ответов.
B

boobellka

Новичок
Регистрация
30.07.2006
Сообщения
2
Доброе всем время суток! :)
Задача, заставить перемещаться массив картинок. Подскажите,пожалуйста, что не так?

Вот есть такой код.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>aSTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript">
<!--
var x = -5;
var y = 4;
var step = 100;
var scr=new Array(); //array of images

function aster(o, dx,dy){
document.all["a1"].style.pixelLeft+=dx;
document.all["a1"].style.pixelTop+=dy;
document.all["a2"].style.pixelLeft+=dx;
document.all["a2"].style.pixelTop+=dy;
document.all["a3"].style.pixelLeft+=dx;
document.all["a3"].style.pixelTop+=dy;
}
-->
</script>
</head>
<body onLoad="setInterval('aster(scr[], x,y)',step)">
<img id="a1" name="a1" onclick="document.all.obj.style.posLeft=100" src="a1.gif" style="left:20px; top:100px; width:200px; height: 200px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a2" name="a2" onclick="document.all.obj.style.posLeft=100" src="a2.gif" style="left:30px; top:200px; width:200px; height: 200px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a3" name="a3" onclick="document.all.obj.style.posLeft=100" src="a3.gif" style="left:40px; top:300px; width:200px; height: 200px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a4" name="a4" src="a4.gif" style="left:50px; top:400px; width:200px; height: 200px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a5" name="a5" src="a5.gif" style="left:60px; top:500px; width:200px; height: 200px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
</body>
</html>
 
deMone

deMone

Злой страшный дядька
Регистрация
30.01.2006
Сообщения
937
а откуда вы откопали эти pixelLeft, posLeft и прочие?
 
I

Inpego

New Member
Регистрация
01.08.2006
Сообщения
5
Helen сказал(а):
Вот есть такой код.

<script language="JavaScript">
<!--
var x = -5;
var y = 4;
var step = 100;
var scr=new Array(); //array of images

function aster(o, dx,dy){
document.all["a1"].style.pixelLeft+=dx;
document.all["a1"].style.pixelTop+=dy;
document.all["a2"].style.pixelLeft+=dx;
document.all["a2"].style.pixelTop+=dy;
document.all["a3"].style.pixelLeft+=dx;
document.all["a3"].style.pixelTop+=dy;
}
-->
Нажмите, чтобы раскрыть...
Всё просто - вместо pixelTop и pixelLeft используешь просто document.all["a1"].style.left и document.all["a1"].style.top. И ещё совет - набора all нету в Файрфоксе, так что если хочешь, чтоб там работало, используй:
var el=document.getElementById('a1');
el.style.top+=dy;
 
v0rbis

v0rbis

selfcoded
Регистрация
02.05.2005
Сообщения
923
так покошернее будет:

Код: 
 for(var i=0;i<document.images.length-1;i++)
 {
   document.images[i].style.left+=dx;
 }
проверяйте имя картинки, если не требуется менять все .... я задал вам вектор для действий..
 
B

boobellka

Новичок
Регистрация
30.07.2006
Сообщения
2
Всем здрасте! Спасибо большое за варианты... но увы...
понимаю, что рассматривать код не самое интересное занятие...
но у меня одна картинка, и я ее хочу размножить на элементы массива....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>aSTER</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
var x=5;
var y=-10;
var step = 100;

//Функция движения
function aster(o,dx,dy, da, db ){

var asteroid = new Array();
// cмещение

asteroid[1] = "a_div";
asteroid[2] = "a_div1";
asteroid[3] = "a_div2";
asteroid[4] = "a_div3";

for (var i=0;i<asteroid.length;i++)
{
var areaRight = area.style.pixelLeft + area.style.pixelWidth;
var areaBottom = area.style.pixelTop + area.style.pixelHeight;
var PixelRight = document.all["asteroid"].style.left + document.all["asteroid"].style.Width;
var PixelBottom = document.all["asteroid"].style.top + document.all["asteroid"].style.Height;

//движение в квадрате
if ((PixelRight+dx<=areaRight)&&(PixelBottom+dy <= areaBottom)&&(area.style.pixelLeft <= document.all["asteroid"].style.left+dx)&&(document.all["asteroid"].style.top<=asteroid.style.pixelTop+dy)){
document.all["asteroid"].style.left+=dx;
document.all["asteroid"].style.top+=dy;
}
//справа
else if (PixelRight+dx > areaRight) {
dx=-dx;
document.all["asteroid"].style.left=areaRight-area.style.pixelWidth-dx;
document.all["asteroid"].style.top+=dy;
}
//вниз
else if (PixelBottom+dy > areaBottom){
dy=-dy;
document.all["asteroid"].style.leftt+=dx;
document.all["asteroid"].style.top=areaBottom-area.style.pixelHeight-dy;
}
//слева
else if (asteroid.style.pixelLeft+dx < area.style.pixelLeft){
dx=-dx;
document.all["asteroid"].style.top+=dy;
document.all["asteroid"].style.left=area.style.pixelLeft+area.style.pixelWidth-dx;
}

//сверху
else if (asteroid.style.pixelTop+dy < area.style.pixelTop){
dy=-dy;
document.all["asteroid"].style.left+=dx;
document.all["asteroid"].style.top=area.style.pixelTop+area.style.pixelHeight-dy;
}
}
out_AR.value=areaBottom;
out_DR.value=PixelBottom;
out_AB.value=areaRight;
out_DB.value=PixelRight;
}
</script>

</head>

<body onLoad="setInterval('move_asters(document.getElementById(\'aster\'),x,y)', step)" >


<div id="area" style="width:300 px; height: 300px; left: 100px; top: 100px; border: 1px solid;position:absolute; z-index: 0; "></div>


<img id="a_div" name="a_div" src="1.jpg" style="left:100px; top:300px; width:10px; height: 10px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a_div2" name="a_div2" src="1.jpg" style="left:150px; top:300px; width:10px; height: 10px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a_div3" name="a_div3" src="1.jpg" style="left:200px; top:300px; width:10px; height: 10px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">
<img id="a_div4" name="a_div4" src="1.jpg" style="left:250px; top:300px; width:10px; height: 10px; font-size: 1px; position:absolute; z-index:0; visibility:visible;">

<div id="output" style="left: 15px; top: 720px; width: 100px; height: 50px; position: absolute; z-index:0;">
<input type="text" name="out_AR" value="0" size="8">
<input type="text" name="out_AB" value="0" size="8">
<input type="text" name="out_DR" value="0" size="8">
<input type="text" name="out_DB" value="0" size="8">
</div>
</body>
</html>
 

Вложения

Статус
Закрыто для дальнейших ответов.

Онлайн статистика

Пользователи онлайн
0
Гости онлайн
33
Всего посетителей
33
Общее число может включать скрытых пользователей.

Статистика форума

Темы
10 927
Сообщения
64 041
Пользователи
12 692
Новый пользователь
TwxqrpPex

Новые пользователи

Поделиться этой страницей

Верх Низ