Форум

ATNC · #1 (**permalink**) 20.05.2013, 09:13

Добрый день. Есть текст. Как сделать так, чтобы доходя до края окна, он не останавливался, а отбивался от края, как шарик, и летел в другую сторону?

<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>

keen · #2 (**permalink**) 20.05.2013, 09:58

ну заведи пару булевских переменных - toRight и toBottom например.
пока они true, двигай текст вправо и вниз соответственно.
как только текст доходит до края экрана - инвертируй нужную переменную и вместо прибавления дельты расстояния, вычитай.

всего делов-то.

ATNC · #3 (**permalink**) 20.05.2013, 11:35

Спасибо. Скажите, пожалуйста, а как сделать верхнюю и левую границу?

keen · #4 (**permalink**) 20.05.2013, 11:56

"вот зануда, проще дать чем объяснить почему не хочу"

вот держи код.
набросал на коленке по-быстрому. без учёта ресайза окна и прочего.

<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>

Форум

Справочник

Discord чат

Курсы javascript