Plynuly pohyb textu v jQuery – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Plynuly pohyb textu v jQuery – JavaScript, AJAX, jQuery – Fórum – Programujte.comPlynuly pohyb textu v jQuery – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Bazzi0
Duch
7. 7. 2010   #1
-
0
-

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">
<!--
var data = new Array(<asp:PlaceHolder ID="banner" runat="server"></asp:PlaceHolder>);
var posledni_hodnota = 1;

$(function (){
start();
});
function start()
{
if($("#zobrazovany_text tr").size()==0)
{
$("#zobrazovany_text").append("<tr><td>"+data[0]+"</td></tr>");
$("#zobrazovany_text").append("<tr><td>"+data[1]+"</td></tr>");
posledni_hodnota++;
setTimeout("start()",5000);
}
else
{
$("#zobrazovany_text tr:first").hide('slow',function ()
{
$("#zobrazovany_text tr:first").remove();
$("#zobrazovany_text").append("<tr class=\"neviditelny\"><td>"+data[posledni_hodnota]+"</td></tr>");
$(".neviditelny").show("slow",
function ()
{
$("#neviditelny").removeClass("neviditelny")
}
)
}
)

posledni_hodnota++;
if (posledni_hodnota == data.length)
posledni_hodnota = 0;
setTimeout("start()",3000);
}
}
//-->
</script>

Nahlásit jako SPAM
IP: 194.228.240.–
asdasd
~ Anonymní uživatel
30 příspěvků
8. 7. 2010   #2
-
0
-

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.–
Bazzi0
Duch
8. 7. 2010   #3
-
0
-

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

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

Oprava překlepu:

.test > div {
height: 20px;
}

Nahlásit jako SPAM
IP: 83.240.95.–
Bazzi0
Duch
8. 7. 2010   #6
-
0
-

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

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>

Nahlásit jako SPAM
IP: 83.240.95.–
Bazzi0
Duch
8. 7. 2010   #8
-
0
-

joooo to je ono, dekuji ti. Vypada to presne tak jak potrebuji. Jen si to musim spomalit a narvat tam data :-)

Nahlásit jako SPAM
IP: 194.228.240.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 6 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý