текст = шарик
Добрый день. Есть текст. Как сделать так, чтобы доходя до края окна, он не останавливался, а отбивался от края, как шарик, и летел в другую сторону?
<html>
<body id="body">
<span id="move-me" style="position: absolute; border: 1px dashed black;">тытыты</span>
<script type="text/javascript">
var phi = Math.PI / 6; //устанавливаем кут
var rho = 0; //Начальное значение радиус -вектора
var rhoOffset = 5.5; //прирост радиус-вектора
function moveByLine() {
//по Х
document.getElementById('move-me').style.left = rho * Math.cos(phi) + 'px';
//по У
document.getElementById('move-me').style.top = rho * Math.sin(phi) + 'px';
rho += rhoOffset;
//ЕСЛИ елемент выходит за нижний и правый край страницы - отменить интервал
if ((document.getElementById('move-me').offsetLeft +
document.getElementById('move-me').offsetWidth >=
document.getElementById('body').clientWidth) ||
(document.getElementById('move-me').offsetTop +
document.getElementById('move-me').offsetHeight >=
document.getElementById('body').clientHeight))
clearInterval(m);
}
var m = setInterval(moveByLine,20);
</script>
</body>
</html>
|
ну заведи пару булевских переменных - toRight и toBottom например.
пока они true, двигай текст вправо и вниз соответственно. как только текст доходит до края экрана - инвертируй нужную переменную и вместо прибавления дельты расстояния, вычитай. всего делов-то. |
Спасибо. Скажите, пожалуйста, а как сделать верхнюю и левую границу?
|
"вот зануда, проще дать чем объяснить почему не хочу"
вот держи код. набросал на коленке по-быстрому. без учёта ресайза окна и прочего.
<html>
<body id="body">
<span id="move-me" style="position: absolute; border: 1px dashed black;">i like to move it</span>
<script type="text/javascript">
var DELTA_X = 10, // дельта изменений по горизонтали
DELTA_Y = 10, // дельта изменений по вертикали
INTERVAL = 20, // интервал в миллисекундах перерисовки элемента
bodyWidth = document.getElementById('body').clientWidth,
bodyHeight = document.getElementById('body').clientHeight,
el = document.getElementById('move-me'),
elW = el.clientWidth,
elH = el.clientHeight,
elTop = 100, // начальная координата элемента по горизонтали
elLeft = 50, // начальная координата элемента по вертикали
toRight = true,
toBottom = false;
function setElCoords(e, x, y) {
e.style.left = x + 'px';
e.style.top = y + 'px';
}
setInterval(function () {
elLeft = elLeft + (toRight ? DELTA_X : -DELTA_X);
elTop = elTop + (toBottom ? DELTA_Y : -DELTA_Y);
setElCoords(el, elLeft, elTop);
if ((elLeft + elW >= bodyWidth) || (elLeft <= 0)) {
toRight = !toRight;
}
if ((elTop +elH >= bodyHeight) || (elTop <= 0)) {
toBottom = !toBottom;
}
}, INTERVAL);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:24. |