| Autor | Zpráva | ||
|---|---|---|---|
| Fisak Profil |
#1 · Zasláno: 3. 5. 2013, 13:08:22
Dobrý den. Udělal jsem si kod na změnu pozadí stránky bez nutnosti refreshe stránky. Chtěl bych ale aby se mi pozadí stránky měnilo plynule tzn. aby se nové pozadí zobrazilo až tehdy když bude načtené. Šlo by toto udělat pomocí jQuery například? A jak?
|
||
| JaySee Profil |
#2 · Zasláno: 3. 5. 2013, 13:20:47
No když použiješ knihovnu jQueryUI, pak máš k dispozici spoustu efektů. Jedním z nich je třeba animate ->
var t = $("body");
t.animate({backgroundColor: '#F00' }, 5000, 'linear', function() {
// callback
t.after('<div>Animation complete.</div>');
}); |
||
| Fisak Profil |
#3 · Zasláno: 3. 5. 2013, 13:23:41 · Upravil/a: Fisak
JaySee:
používám <script src="http://code.jquery.com/jquery-1.9.1.js"></script> navíc tohle je spíš časovač .. po 5ti vteřinách se mi zobrazí akorát animation complete .. a to ať se to načetlo nebo ne.. index.php: < <html>
<head>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function updateDb(smer) {
var datastring = 'pohyb='+ smer;
$.ajax({
type: "POST",
url: "pohyb.php",
data: datastring,
success: function() {
$("#ReloadThis").load("vypis.php");
}
});
return false;
}
</script>
<form method="post" onsubmit="return false">
<input type="submit" name="nahoru" value="Nahoru" onclick="return updateDb('nahoru')"/>
<input type="submit" name="dolu" value="Dolu" onclick="return updateDb('dolu')"/>
<input type="submit" name="doleva" value="Doleva" onclick="return updateDb('doleva')"/>
<input type="submit" name="doprava" value="Doprava" onclick="return updateDb('doprava')"/>
</form>
<span id="ReloadThis"></span>
<script>
$("#ReloadThis").load("vypis.php");
</script>
</body>
</html>vypis.php: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<?php
$heslo = "vertrigo";
$server = "localhost";
$login = "root";
$database = "system";
if (MySQL_Connect($server, $login, $heslo) && MySQL_Select_DB($database))
{
$dotazNaMysql = mysql_query("select * from zkouska where type = 'pohyb'");
while($hodnoty = mysql_fetch_assoc($dotazNaMysql)) {
?>
<style>
body {
background-image: url("obrazek.php?urob=<?php echo $hodnoty['text']; ?>");
background-repeat: no-repeat;
background-position: center;
background-attachment:fixed;
background-color:#FFFFFF;
}
</style>
<?php
}
}
?>U index.php zmáčknu tlačítko a vypis.php se mi znova načte.. celé to pozadí.. a já bych potřeboval aby se mi to pozadí načetlo tehdy až bude celé načtené a do tý doby by tam bylo starý pozadí.. |
||
| JaySee Profil |
#4 · Zasláno: 3. 5. 2013, 14:15:23
Fisak:
No jQueryUI je komponenta pro jQuery, jež má k dispozici obrovské množství efektů a funkcí pro uživatelská rozhraní. Jedním z těchto efektů je i animation, jen přemýšlím, zda pro jeden efekt je rozumné tahat celou knihovnu. Nicméně to co má na mysli je zde: jQuery UI - zip a domumentace je zde dokumentace. Pokud to nechceš nijak řešit, tak stačí po načtení jQuery načíst ještě toto: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> Ten časovač, o kterém píšeš, určuje délku trvání toho efektu, takže pokud tam nebudeš mít jQuery UI, nic ti to neudělá. Každopádně postup je takový, že na té stránce vypis normálně deklaruješ background pomocí CSS a po načtení spustíš script, co jsem psal výše. $(document).ready(function(){
var t = $("body");
t.animate({backgroundColor: '#F00' }, 5000, 'linear', function() {
// callback
// t.after('<div>Animation complete.</div>');
});
});Ten callback asi vůbec nepotřebuješ řešit, jelikož žádnou akci po změně pozadí neprovádíš. Takže ho buď uplně vyhoď, nebo si s ním můžeš dále hrát. |
||
| Fisak Profil |
#5 · Zasláno: 3. 5. 2013, 14:28:42
JaySee:
Děkuji funguje to.. Bohužel to neni přesně tak jak jsem to myslel.. Tam mítsto toho "backgroundColor: '#F00' " by mělo být to staré pozadí.. Ten přechod pak vypadá divně.. viz. http://chtest.cherubis.cz/ |
||
| Chamurappi Profil |
#6 · Zasláno: 3. 5. 2013, 14:35:32
Reaguji na JaySeeho:
„No jQueryUI je komponenta pro jQuery“ … „pokud tam nebudeš mít jQuery UI, nic ti to neudělá“ Co mu to tady vyprávíš? Funkce animate není v jQuery UI, ne?
Reaguji na Fisaka: Nemůžeš plynule měnit průhlednost pozadí, můžeš nanejvýš měnit průhlednost celého elementu pokrývajícího celé pozadí. Obrázek má událost onload.
|
||
| Fisak Profil |
#7 · Zasláno: 3. 5. 2013, 14:42:23
Chamurappi:
Teď jsem moc nepochopil jak to bylo myšleno. Jestli se vůbec chápeme. Já bych rád aby se mi načetlo jedno pozadí. To je jedno jakym způsobem. Ale když zmáčknu jedno z tlačítek viz. http://chtest.cherubis.cz/ tak aby se mi načetlo nové pozadí tehdy až bude celé načteno a do té doby by tam bylo staré pozadí.. |
||
| Chamurappi Profil |
#8 · Zasláno: 3. 5. 2013, 14:52:14
Reaguji na Fisaka:
„nové pozadí tehdy až bude celé načteno“ To nové pozadí dáš jako src do <img>, jinak bys nemohl chytit jeho onload. Jakmile bude <img> načtený, můžeš adresu obrázku nastavit jako pozadí a už se nebude znovu stahovat.
|
||
| Fisak Profil |
#9 · Zasláno: 3. 5. 2013, 15:01:50
Chamurappi:
stále to moc nechápu.. Můžete mi prosím dát příklad ? |
||
| JaySee Profil |
#10 · Zasláno: 3. 5. 2013, 15:49:27
Chamurappi:
Omlouvám se za dezinformaci, bylo to myšleno tak, že barevný přechod formou animate je přístupný až jQueryUI. |
||
| 1Pupik1989 Profil |
#11 · Zasláno: 3. 5. 2013, 16:01:05
Fisak:
Hledej na googlu "Preload Images javascript". Tím Preloaderem načteš obrázky a pak už můžeš pozadí libovolně měnit. Věsměs je to to, co psal Chamurappi. |
||
| Fisak Profil |
#12 · Zasláno: 3. 5. 2013, 17:00:23
Udělal jsem to tedy takto:
<script>
//kdyz pujdu nahoru
$('<img/>').attr('src', 'obrazek.php?urob=nahoru').load(function() {
$('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu dolu
$('<img/>').attr('src', 'obrazek.php?urob=dolu').load(function() {
$('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu doleva
$('<img/>').attr('src', 'obrazek.php?urob=doleva').load(function() {
$('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
//kdyz pujdu doprava
$('<img/>').attr('src', 'obrazek.php?urob=doprava').load(function() {
$('body').css('background-image', "url(obrazek.php?urob=<?php echo $hodnoty['text']; ?>)");
});
</script>snad jsem někde neudělal chybu... |
||
|
Časová prodleva: 11 let
|
|||
0