Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как сделать чтобы лого двигалось слево на право? (https://javascript.ru/forum/events/37969-kak-sdelat-chtoby-logo-dvigalos-slevo-na-pravo.html)

Наташа2013 15.05.2013 19:36

Как сделать чтобы лого двигалось слево на право?
 
где в моем коде ошибка?
лого стоит на месте, почему?
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
<style type="text/css">
#logo {
	overflow: hidden;
	position: relative;
	border: 1px solid red;
}
#logo img {
	display: block;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var logoDiv = document.getElementById('logo');
	var logoImg = logoDiv.firstChild;
	logoDiv.style.width = logoImg.width + 'px';
	//logoImg.style.position = 'absolute';
	logoPos = -logoImg.width;
	var timer = window.setInterval(function() {
		logoPos += 5;
		if(logoPos >= 0) {
			logoPos = 0;
			window.clearInterval(timer);
		}
		logoImg.style.right = logoPos + 'px';
	}, 50);
}
</script>
  </head>
  <body>
  <div id="logo"><img src="solarenergie.gif" alt="logo" /></div>
  </body>
</html>

Спасибо заранее!

dmitriymar 15.05.2013 20:01

а отследить самостоятельно, либо алертами либо консоль логами значения каждой переменной и значения их в итерациях, не?
да и строку
Цитата:

Сообщение от Наташа2013
//logoImg.style.position = 'absolute';

не помешает раскоментить.
и я конечно извиняюсь . где по вашему, будет абсолютно позиционируемый элемент с logoImg.style.right = (допустим) -50рх?

vadim5june 15.05.2013 20:04

что то не видно чтобы у Вас div id="logo" style был не статический

Наташа2013 15.05.2013 20:08

если раскоментить строку ogoImg.style.position = 'absolute';,
то лого вообще не появляется на странице((

vadim5june 15.05.2013 20:10

Цитата:

Сообщение от Наташа2013 (Сообщение 250717)
если раскоментить строку ogoImg.style.position = 'absolute';,
то лого вообще не появляется на странице((

напишите
logoDiv.style.position = 'absolute';

dmitriymar 15.05.2013 20:12

Цитата:

Сообщение от Наташа2013
если раскоментить строку ogoImg.style.position = 'absolute';,
то лого вообще не появляется на странице((

дак и не должно с отрицательной правой координатой:D
в остальном -самостоятельные проверки значения каждой переменной в каждой итерации. да и в инструментах разработчика -можно увидить и ошибки и текущие значения координат дива....

Цитата:

Сообщение от vadim5june
напишите
logoDiv.style.position = 'absolute';

Действительно -с первого взляда не видно что абсолютится неабсолютимое)
И движется недвижимое:
Цитата:

Сообщение от Наташа2013
logoImg.style.right = logoPos + 'px';


Наташа2013 15.05.2013 20:31

Цитата:

Сообщение от dmitriymar (Сообщение 250720)
дак и не должно с отрицательной правой координатой:D
в остальном -самостоятельные проверки значения каждой переменной в каждой итерации. да и в инструментах разработчика -можно увидить и ошибки и текущие значения координат дива....


Действительно -с первого взляда не видно что абсолютится неабсолютимое)
И движется недвижимое:

все исправила:
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
<style type="text/css">
#logo {
	overflow: hidden;
	position: relative;
	border: 1px solid red;
}
#logo img {
	display: block;
}
</style>
<script type="text/javascript">
window.onload = function() {
	var logoDiv = document.getElementById('logo');
	var logoImg = logoDiv.firstChild;
	logoDiv.style.width = logoImg.width + 'px';
	logoDiv.style.position = 'absolute';
	logoPos = -logoImg.width;
	var timer = window.setInterval(function() {
		logoPos += 5;
		if(logoPos >= 0) {
			logoPos = 0;
			window.clearInterval(timer);
		}
		logoDiv.style.left = logoPos + 'px';
	}, 50);
}
</script>
  </head>
  <body>
  <div id="logo"><img src="solarenergie.gif" alt="logo" /></div>
  </body>
</html>

работает, но не до конца, толко двигается на ширину лого, а мне надо чтобы по всему экрану двигаласъ и слево опять появлялась))
как поменять?

dmitriymar 15.05.2013 20:36

фаирбаг + алерты(консольлоги) -дадут ответы на все вопросы

vadim5june 15.05.2013 20:40

так попробуйте-
window.onload = function() {
	var logoDiv = document.getElementById('logo');
	var logoImg = logoDiv.firstChild;
	logoDiv.style.width = logoImg.width + 'px';
	logoDiv.style.position = 'absolute';
	logoPos =0;
	var timer = window.setInterval(function() {
		logoPos += 5;
		if(logoPos >=parseInt(document.body.style.width)) {
			logoPos = 0;
			//window.clearInterval(timer);
		}
		logoDiv.style.left = logoPos + 'px';
	}, 50);
}


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