Как сделать чтобы лого двигалось слево на право?
где в моем коде ошибка?
лого стоит на месте, почему? <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> Спасибо заранее! |
а отследить самостоятельно, либо алертами либо консоль логами значения каждой переменной и значения их в итерациях, не?
да и строку Цитата:
и я конечно извиняюсь . где по вашему, будет абсолютно позиционируемый элемент с logoImg.style.right = (допустим) -50рх? |
что то не видно чтобы у Вас div id="logo" style был не статический
|
если раскоментить строку ogoImg.style.position = 'absolute';,
то лого вообще не появляется на странице(( |
Цитата:
logoDiv.style.position = 'absolute'; |
Цитата:
в остальном -самостоятельные проверки значения каждой переменной в каждой итерации. да и в инструментах разработчика -можно увидить и ошибки и текущие значения координат дива.... Цитата:
И движется недвижимое: Цитата:
|
Цитата:
<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> работает, но не до конца, толко двигается на ширину лого, а мне надо чтобы по всему экрану двигаласъ и слево опять появлялась)) как поменять? |
фаирбаг + алерты(консольлоги) -дадут ответы на все вопросы
|
так попробуйте-
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. |