Plynuly pohyb textu v jQuery

Fórum › JavaScript, AJAX, jQuery

Bazzi 0

Duch

7. 7. 2010 #1

Zdravim vsechny
prosim nekoho o pomoc, jsem zacatecnik s jQuery, udelal jsem si script ktery posunuje natahnuty text o jeden radek, ale bohuzel posun textu je strasne skokovy a hlavne pri prvni zmene se nenacte spravne

zde je script

<script src="Script/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">

</script>

Nahlásit jako SPAM

IP: 194.228.240.–

asdasd

~ Anonymní uživatel
~ 30 příspěvků

8. 7. 2010 #2

Z tvojí ukázky sice nejde moc poznat, jak přesně chceš ten text posouvat, ale dalo by se to řešit třeba takhle:

<!DOCTYPE

	html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

<html>

	<head>

		<meta

			http-equiv = "content-type"

			content    = "text/html; charset = utf-8"

		/>

		<script

			src  = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

			type = "text/javascript"

		></script>

		<script>

			$.fn.scrollText = function(options) {

				options = $.extend(

					{

						data:  [],

						delay: 1000,

						speed: 250

					},

					options

				);

				var $this = $(this);

				$.each(options.data, function(index, row) {

					$this.append('<div>' + row + '</div>');

				});

				if (options.data.length < 2)

					return;

				setInterval(

					function() {

						$(':first', $this).slideUp(

							options.speed,

							function() {

								$this.append($(this).remove().show());

							}

						);

					},

					options.delay

				);

			};

			

			$(function() {

				$('.test').scrollText({

					data: [

						'První řádek.',

						'Druhý řádek.',

						'Třetí řádek.',

						'Čtvrtý řádek.',

						'Pátý řádek.'

					]

				});

			});

		</script>

		<style>

			.test {

				padding: 5px;

				min-width: 150px;

				height: 19px; 

				background: #000000;

				border: 3px solid #999999;

				overflow: hidden;

				color: #ffffff;

				font-weight: bold;

				text-transform: uppercase;

				font-size: 18px;

				text-align: center;

			}

			

			.test > div {

				width: 100%;

				height: 100%;

				margin-bottom: 5px;

			}

		</style>

	</head> 

	<body>

		<div class = "test"></div>

	</body>

</html>

Nahlásit jako SPAM

IP: 83.240.95.–

Bazzi 0

Duch

8. 7. 2010 #3

na zacatku do promene var data nactu cca 20 radku a zobrazuji je vzdy po dvou.

na zacatku se zobrazi radek 1 a 2 po 3s by mel 1.radek zmizet 2.radek by se mel plynule posunout o radek vys (tam kde byl predtim prvni) a pod nim na vytvorenem miste by se mel plynule zobrazit radek 3. Po dalsich 3s zmizi radek 2, radek 3 se posune nahoru a radek 4 se zobrazi podnim ...

takto by to melo delat, ale bohuzel uz druha faze (zmizeni radku 1 a posun radku 2 neni v poradku :( ) ale dalsi radky jsou jiz castecne plynule ale neni to zcela plynuly pohyb :(

Nahlásit jako SPAM

IP: 194.228.240.–

asdasd

~ Anonymní uživatel
~ 30 příspěvků

8. 7. 2010 #4

Stačí trochu upravit CSS a bude to fungovat přesně tak, jak popisuješ:

.test {
height: 45px;
}

.text > div {
height: 20px;
}

No a data můžeš předat takhle:

$('.test').scrollText({
'data': data, // pole s řádky
delay: 3000 // prodleva mezi posuvy
});

Nahlásit jako SPAM

IP: 83.240.95.–

asdasd

~ Anonymní uživatel
~ 30 příspěvků

8. 7. 2010 #5

Oprava překlepu:

.test > div {
height: 20px;
}

Nahlásit jako SPAM

IP: 83.240.95.–

Bazzi 0

Duch

8. 7. 2010 #6

asdasd napsal:
Oprava překlepu:

.test > div {
height: 20px;
}

dotazy :)

1. pouzivas novejsi knihovnu jQuery, nevadi ne
2. ty vzdy schovavas ten prvni radek a posunujes text, dalo by se to udelat tak aby se ten text posunoval "trhane" ze prvni zmizi jakoby mimo ramecek a dalsi ze sobrazi?? Nevim jestli to spravne vysvetluji tak prikladam ukazku
www.aktualne.cz - jim se to posouva horizontalne (ja chci vertikal) po x sekundach se jim posune horni baner o jedno doprava

Jinak ti prevelice dekuji nebot uz stojim na prahu dokonalosti jak jsem to potreboval. Moc dekuji :)

Nahlásit jako SPAM

IP: 194.228.240.–

asdasd

~ Anonymní uživatel
~ 30 příspěvků

8. 7. 2010 #7

Pokud jsem tě správně pochopil, tak by to mohlo vypadat nějak takhle:

<!DOCTYPE

	html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

>

<html>

	<head>

		<meta

			http-equiv = "content-type"

			content    = "text/html; charset = utf-8"

		/>

		<script

			src  = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

			type = "text/javascript"

		></script>

		<script>

			$.fn.scrollText = function(options) {

				options = $.extend(

					{

						data:  [],

						delay: 3000,

						speed: 250

					},

					options

				);

				var $container = $(this);

				$.each(options.data, function(index, row) {

					$container.append('<div>' + row + '</div>');

				});

				if (options.data.length < 2)

					return;

				setInterval(

					function() {

						var $row = $(':first', $container);

						$row

							.data({marginTop: $row.css('margin-top')})

							.animate(

								{marginTop: '-' + $row.outerHeight()},

								{

									duration: options.speed,

									complete: function() {

										$container.append($row.remove());

										$row.css({marginTop: $row.data('marginTop')});

									}

								}

							);

					},

					options.delay

				);

			};

			

			$(function() {

				$('.test').scrollText({

					data: [

						'První řádek.',

						'Druhý řádek.',

						'Třetí řádek.',

						'Čtvrtý řádek.',

						'Pátý řádek.'

					]

				});

			});

		</script>

		<style>

			.test {

				min-width: 150px;

				height: 55px; 

				background: #000000;

				border: 3px solid #999999;

				overflow: hidden;

				color: #ffffff;

				font-weight: bold;

				text-transform: uppercase;

				font-size: 18px;

				text-align: center;

			}

			

			.test > div {

				width: 100%;

				height: 20px;

				margin: 5px 5px 0;

			}

		</style>

	</head> 

	<body>

		<div class = "test"></div>

	</body>

</html>