| Autor | Zpráva | ||
|---|---|---|---|
| Jan Knížek Profil |
#1 · Zasláno: 18. 6. 2011, 10:25:41 · Upravil/a: Jan Knížek
Dobrý den,
mám obrázek, který se opakuje po ose Y. Potřebuji aby se obrázky plynule posunovali dolů a zároveň až nahoře vznikne díra, aby se tam objevil obrázek nový. Protože ten obrázek se tam vejde jen asi čtyřikrát, tak jsem myslel, že bych tam vložil čtyři div a nastavoval bych jich top. Tohle řešení mi nepřipadá zrovna korektní, neexistuje nějaké lepší? Díky, Jan Knížek |
||
| Rellik Profil |
#2 · Zasláno: 18. 6. 2011, 10:38:47
A co ten obrázek udělat na celou výšku, tak aby byl potřeba jen jeden?
|
||
| panther Profil |
#3 · Zasláno: 18. 6. 2011, 10:46:05
Rellik:
jednak je zbytečné dělat x-krát větší obrázek, než je třeba, druhak nevíš, jak vysoký ten blok bude. To bude rozdílné napříč prohlížeči. Jan Knížek: nějak jsem nepochopil, o co se snažíš. Opakuješ obrázek po ose Y, tak se opakuje odshora dolů. Nahoře žádná mezera nevznikne. Prosím o odkaz na současné řešení + odkaz, jak by to mělo ve finále vypadat. |
||
| Jan Knížek Profil |
#4 · Zasláno: 18. 6. 2011, 12:07:27
Zde najdete ukázku. Kód je trochu prasácký, ale doufám, že pro ilustraci postačí.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com">; <title></title> <style type="text/css"> .obdelnik { width:366px; height:336px; background-image:url("obdelnik.gif"); position:absolute; color:white; text-align:center; } #obdelniky { padding:0; margin:0; height:100%; overflow:hidden; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //používám framework jQuery //vypočti kolik bude obrázků na výšku var vyska = $("#obdelniky").height() / 336 + 1; for(var i = 0; i < vyska; i++) { //přidej obdélnéík a nastav jeho pozici TOP $("#obdelniky").append("<div class=\"obdelnik\">text</div>"); var top = ((i - 1) * 336) + "px"; $(".obdelnik").eq(i).css({"top":top}); } var ukazatel = 0; var posun = 0; //nastav TIMER setTimeout(function(){ posun++;//přidej posun a vykresli obdélníky vykresli_obdelniky(posun); setTimeout(arguments.callee, 15); }, 15); function vykresli_obdelniky(posun) { //když je posunuto o právě jeden obrázek, přesuň poslední na počáteční pozici if(posun % 336 == 0) { //uprav ukazatel a TOP ukazatel--; ukazatel = ukazatel<0?$(".obdelnik").length-1:ukazatel; $(".obdelnik").eq(ukazatel).css({"top":"-336px"}).height("336px"); } //projeď všechny obdélníky a posuň je for(var i = 0; i < vyska; i++) { //posuň var top = (parseInt($(".obdelnik").eq(i).css("top")) + 1) + "px"; $(".obdelnik").eq(i).css({"top":top}); //tahle podmínka funguje jen napůl a je dost hrozně napsaná. Zajišťuje aby nebyly vidět obrázky mimo obrazovku if((parseInt($(".obdelnik").eq(i).css("top")) + 337) > $("#obdelniky").height()) { $(".obdelnik").eq(i).height(336 - ((parseInt($(".obdelnik").eq(i).css("top")) + 337) - $("#obdelniky").height())); } } } }); </script> </head> <body> <div id="obdelniky"></div> </body> </html> |
||
| Jan Knížek Profil |
#5 · Zasláno: 19. 6. 2011, 20:13:06
Tak jsem kód ještě vylepšil. Přesně tohle potřebuji. Nevíte jak to udělat efektivněji?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com">; <title></title> <style type="text/css"> .obdelnik { width:366px; height:336px; background-image:url("obdelnik.gif"); position:absolute; color:white; text-align:center; overflow:hidden; } body { padding:0; margin:0; } #obdelniky { width:366px; padding:0; margin:0; height:100%; overflow:hidden; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //používám framework jQuery var zastav = false; $("#obdelniky").mouseenter(function(){zastav = true;}); //zastavuj a vypínej posun $("#obdelniky").mouseleave(function(){zastav = false; zapni_posun();}); //vypočti kolik bude obrázků na výšku var vyska = $("#obdelniky").height() / 336 + 1; for(var i = 0; i < vyska; i++) { //přidej obdélnéík a nastav jeho pozici TOP $("#obdelniky").append("<div class=\"obdelnik\">text</div>"); var top = ((i - 1) * 336) + "px"; $(".obdelnik").eq(i).css({"top":top}); } var ukazatel = 0; var posun = 0; 7 zapni_posun(); //nastav TIMER function zapni_posun() { setTimeout(function(){ posun++;//přidej posun a vykresli obdélníky vykresli_obdelniky(posun); if(zastav == false) setTimeout(arguments.callee, 15); }, 15); } function vykresli_obdelniky(posun) { //když je posunuto o právě jeden obrázek, přesuň poslední na počáteční pozici if(posun % 336 == 0) { //uprav ukazatel a TOP ukazatel--; ukazatel = ukazatel<0?$(".obdelnik").length-1:ukazatel; $(".obdelnik").eq(ukazatel).css({"top":"-336px"}).height("336px"); } //projeď všechny obdélníky a posuň je for(var i = 0; i < vyska; i++) { //posuň var top = (parseInt($(".obdelnik").eq(i).css("top")) + 1) + "px"; $(".obdelnik").eq(i).css({"top":top}); //tahle podmínka funguje jen napůl a je dost hrozně napsaná. Zajišťuje aby nebyly vidět obrázky mimo obrazovku if((parseInt($(".obdelnik").eq(i).css("top")) + 337) > $("#obdelniky").height()) { $(".obdelnik").eq(i).height(336 - ((parseInt($(".obdelnik").eq(i).css("top")) + 337) - $("#obdelniky").height())); } } //měn barvu text, po najetí myši na obdélník $(".obdelnik").mouseenter(function(){ $(this).css({"color":"red"}); }); $(".obdelnik").mouseleave(function(){ $(this).css({"color":"white"}); }); } }); </script> </head> <body> <div id="obdelniky"></div> </body> </html> |
||
|
Časová prodleva: 13 let
|
|||
0