| | |
| Stránka: 1 z 1
| [ Príspevkov: 3 ] | |
Autor | Správa |
---|
Registrovaný: 28.02.09 Prihlásený: 19.02.18 Príspevky: 241 Témy: 56 |
Cavte napisal som pre vlastnu potrebu Background Changer s navigaciou. Je to asi moj prvy script ktory som pisal sam. Chcel by som vediet nejake rady alebo chyby ktore v kode mam, pripadne opravy kodu aby to bolo napisane lepsie ako teraz. Sem tam sa stane ze to pozadie blbne ked prepinam v navigacii. Viete mi poradit cim to bude ? Vdaka JSKód: <script type="text/javascript"> $(window).load(function(){ function bgChanger (element1, element2) { this.element1 = element1; this.element2 = element2; this.timer; } bgChanger.prototype = { init: function(){ var self = this; $(self.element1+" > div").css('display', 'block'); if (typeof self.element2 !== "undefined" && self.element2) { var pagination = $("<ul></ul>");
if ($(self.element1).children().length > 0) { var i = 1; $(self.element1+" > div").each(function(){ pagination.append('<li '+($(this).hasClass('active') ? 'class="active"' : '')+'><a href="#">'+i+'</a></li>'); i++; }); }
if ($(self.element2).length > 0){ $(self.element2).html(pagination); $(self.element2).find("a").bind('click', function(){ var index = $(this).html(); self.set(index); $(this).parent().siblings().removeClass('active'); $(this).parent().addClass('active'); return false; }); } } }, start: function () { var self = this; self.stop(); self.timer = setInterval(function(){ var $active = $(self.element1).find('.active'); var $next = ($active.next().length > 0) ? $active.next() : $(self.element1).find('div:first');
var index = ($next.index()+1);
if (typeof self.element2 !== "undefined" && self.element2) { $(self.element2+' li').removeClass('active'); $(self.element2+' li:nth-child('+index+')').addClass('active'); }
$next.css('z-index', 2); $active.fadeOut(1500, function(){ $active.css('z-index', 1).show().removeClass('active'); $next.css('z-index', 3).addClass('active'); }); }, 7000); }, set: function(index){ var self = this; self.stop(); var $active = $(self.element1).find('.active'); var $next = $(self.element1+' :nth-child('+index+')');
$next.css('z-index', 2); $active.fadeOut(1500, function(){ $active.css('z-index', 1).show().removeClass('active'); $next.css('z-index', 3).addClass('active'); }); self.start(); }, stop: function(){ var self = this; clearTimeout(self.timer); } }; var changer = new bgChanger("#background", "#bg_pagination"); changer.init(); changer.start(); }); </script> htmlKód: <div id="background" > <div style="background-image: url('/images/content/bg_pic1.jpg');" class="active"></div> <div style="background-image: url('/images/content/bg_pic2.jpg');"></div> <div style="background-image: url('/images/content/bg_pic3.jpg');"></div> </div> <div id="bg_pagination"></div> cssKód: html, body{ width: 100%; height: 100%;}
#background{ padding: 0; margin: 0; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } #background > div:not(.active){ display: none; } #background > div{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-attachment: fixed; background-position: left center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #background > div.active{ z-index: 3; }
|
|
Registrovaný: 06.02.14 Prihlásený: 19.01.18 Príspevky: 443 Témy: 9 |
neskusal som to, ale kod vyzera ok mozno len taky detail - pri foreach, netreba index robit pomocou novej premennej, mas ho ako atribut funkcie Kód: $(self.element1+" > div").each(function(index, item){ pagination.append('<li '+($(this).hasClass('active') ? 'class="active"' : '')+'><a href="#">'+(index+1)+'</a></li>'); });
druha vec, tu zbytocne vytvaras dvakrat ten isty element Kód: $(this).parent().siblings().removeClass('active'); $(this).parent().addClass('active');
takto je to menej narocnejsie Kód: $(this).parent().addClass('active').siblings().removeClass('active');
ten fade by som riesil priamo v css nie v js, tam iba zmenu class. nemusel by si riesit next element. proste iba by si 'ponul' triedu active o jeden element dalej a v css by si urobil transition s opacity. nieco ako: Kód: #background { > div { opacity: 0; transition: opacity 0.3s ease; &.active { opacity: 1; } } }
ps: pre background-size uz nie su potrebne prefixy.
|
|
Registrovaný: 28.02.09 Prihlásený: 19.02.18 Príspevky: 241 Témy: 56 | Napísal autor témy DeeJay3: 08.12.2014 16:01 | |
|
Citácia: netreba index robit pomocou novej premennej, mas ho ako atribut funkcie ano jasne .. zabudol som na to .. dik Kód: $(this).parent().addClass('active').siblings().removeClass('active'); mas pravdu .. mozno iba koli postupnosti operacii ktore sa maju vykonat som to napisal takto .. tie dalsie veci transition a opacity + background size -- starsie prehliadace s tym mozu mat problem // Spojený príspevok Pon 08.12.14 16:04aa este jednu vec som nevedel ... ako vytvorit konstruktor pre funkciu .. aby som neskor nemusel volat "changer.init();" ale aby sa to spravilo automaticky
|
|
| Stránka: 1 z 1
| [ Príspevkov: 3 ] | |
Podobné témy | Témy | Odpovede | Zobrazenia | Posledný príspevok |
---|
| IP Changer v Sieťové a internetové programy | 1 | 231 | 14.04.2013 17:50 SKiLEX | | IP Changer v Siete | 4 | 4766 | 01.05.2007 14:04 Tomas1 | | DNS Changer v Antivíry a antispywary | 3 | 570 | 25.05.2012 10:49 Matus111491 | | IP changer -a anonymizer v Sieťové a internetové programy | 0 | 284 | 25.11.2012 14:02 reincarnate | | background v HTML, XHTML, XML, CSS | 1 | 348 | 13.09.2013 21:57 shaggy | | Background v HTML, XHTML, XML, CSS | 15 | 1264 | 06.10.2009 15:54 maťo* | | background v HTML, XHTML, XML, CSS | 23 | 1219 | 02.12.2009 15:56 kaidžas | | Dynamicka IP a IP changer v Sieťové a internetové programy | 3 | 382 | 05.04.2010 18:54 Milanese | | Background-image v HTML, XHTML, XML, CSS | 1 | 1001 | 08.07.2019 14:43 BX | | background-attachment v HTML, XHTML, XML, CSS | 29 | 1237 | 08.08.2008 6:54 don jebot | | BackGround Sound v JavaScript, VBScript, Ajax | 3 | 768 | 24.12.2007 14:35 jablko05 | | background-size?? v HTML, XHTML, XML, CSS | 4 | 546 | 26.01.2010 13:08 max-m | | background+images v HTML, XHTML, XML, CSS | 1 | 292 | 12.07.2013 17:17 shaggy | | css - background-image v HTML, XHTML, XML, CSS | 7 | 1567 | 01.03.2007 18:38 mokus | | css 2*background v HTML, XHTML, XML, CSS | 3 | 386 | 14.06.2012 12:15 F3RY | | Mnozenie background obrazku v HTML, XHTML, XML, CSS | 4 | 384 | 12.03.2009 21:40 Tominator |
| Nemôžete zakladať nové témy v tomto fóre Nemôžete odpovedať na témy v tomto fóre Nemôžete upravovať svoje príspevky v tomto fóre Nemôžete mazať svoje príspevky v tomto fóre
|
|