Форум

AlexMak · #1 (**permalink**) 23.12.2008, 15:51

Сделал смещение текста подобным образом:

function move_left()
{
if (parseInt(document.getElementById('company_text').style.left ) > 20 )
	{
		clearTimeout(right_timeout);
		text=text-10;
		a=text+'%';
		document.getElementById('company_text').style.left=a;
		
		if (text < 30) {
			document.getElementById('company_text').style.right=a-5;
			document.getElementById('company_text').style.left=a;
		}
		
		image=image-10;
		b=image+'%';
		document.getElementById('company_image').style.left=b;
		document.getElementById('company_img').style.left=b;
		left_timeout=setTimeout("move_left()", 50);
	}
}

Т.е. просто меняю координаты, захотелось, чтобы текст как бы подпружинивали в самом конце, т.е. мотался из стороны в сторону. Может кто подскажет? Заколебался уже с координатами возиться, никак не получается достичь нужного результат.

vk65535 · #2 (**permalink**) 23.12.2008, 16:52

Чтобы пружинился - это же задача механники

Ну или школьной физики

По поводу кода - как-то сумбурно сделано, как я понял, где-то должна быть еще функция для движения вправо... Зачем-то каждый раз создаются и сбрасываются таймауты... Зачем-то всякий раз при обращении к элементу, он ищется по его id...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="foo" style="border: 1px solid red; overflow: hidden; position: relative; zoom: 1;">
<div id="bar" style="border: 1px solid green; position: absolute; padding: 1px 2px;">Страдаю фигней :)</div>
</div>
<script type="text/javascript">
(function() {
	var foo = document.getElementById('foo'), bar = document.getElementById('bar');
	foo.style.height = bar.offsetHeight + 'px';
	var x = 0, reverse = false;
	window.setInterval(function() {
		var l = foo.clientWidth - bar.offsetWidth;
		x += Math.pow(6 - x * 4 / l, 2) / 4;
		if (x >= l) x = 0, reverse = !reverse;
		bar.style.left = Math.floor(reverse ? l - x : x) + 'px';
	}, 10);
})();
</script>
</body>
</html>

AlexMak · #3 (**permalink**) 24.12.2008, 09:43

Да вот именно, что не хочется физику вообще вспоминать, лень матушка) Сейчас попробую пошаманить надо кодом, только вот эту строчку не понял x += Math.pow(6 - x * 4 / l, 2) / 4; Там где l,2 - вот это что значит?

Octane · #4 (**permalink**) 24.12.2008, 10:07

Выражение в квадрат возводится, запятая - разделитель между аргументами функции pow

AlexMak · #5 (**permalink**) 25.12.2008, 14:44

Гугл упорно не хочет выдавать формулу по которой движется последняя точка пружины)) Может кто поможет найти?

ZoNT · #6 (**permalink**) 25.12.2008, 16:05

поищи затухающие колебания...

Мне гугл сразу выдал ссылку на вики, где всё есть...

AlexMak · #7 (**permalink**) 26.12.2008, 17:17

Да, так и искал и в принципе нашел, но все равно почему-то не тот эффект который хотелось бы, хочется, чтобы в самом конце движение было из стороны в сторону, максимум чего добился, вот:

function move_left()
{
if (parseInt(document.getElementById('company_text').style.left) > 20 ){
		if (parseInt(document.getElementById('company_text').style.left)>50){
			text = text - 2;
		}	else{
				text -= 20*Math.sin(0.5*text+60);
			}
			a=text+'%';
			document.getElementById('company_text').style.left=a;
	}
}

x-yuri · #8 (**permalink**) 27.12.2008, 18:52

ты б что ли целую страничку запостил, а то желания доделывать не было
попробуй, может это тебе надо было

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="foo" style="border: 1px solid red; overflow: hidden; position: relative; zoom: 1;">
<div id="bar" style="border: 1px solid green; position: absolute; padding: 1px 2px;">Страдаю фигней :)</div>
</div>
<script type="text/javascript">
(function() {
    var foo = document.getElementById('foo'), bar = document.getElementById('bar');
    foo.style.height = bar.offsetHeight + 'px';
	var alpha = 0;
	var fading = 1.1;
    window.setInterval(function() {
        var l = foo.clientWidth - bar.offsetWidth;
		x = l/2 * Math.sin(alpha);
        bar.style.left = Math.floor( x+l/2 ) + 'px';
		alpha += Math.PI / 180 / fading;
		fading += 0.001;
    }, 10);
})();
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript