jQuery posuvník

JavaScript jQuery Zdrojákoviště jQuery posuvník

Jednoduchý jQuery plug-in, který posouvá obsahem elementu podle toho, na které straně se nachází kurzor myši. Plugin má jediný argument a tím je rychlost scrollování.

Online ukázka:

Ukázka jQuery pluginu posuvník

Jednoduché použití:

$(function() {
        $('#obsah').posuvnik(1000);
});

Okomentovaný zdrojový kód pluginu:

(function() {

        // jQuery plug-in
        $.fn.posuvnik = function( rychlost ) {

                // Funkce
                var mouseMove = function(e) {
                        // Opraví event, aby byl použitelný ve všech prohlížečích stejně
                        e = $.event.fix(e);

                        // Zjistí, kde je kurzor
                        var vlevo = e.pageX-$(this).offset().left < ($(this).width()/2) ? true : false;
                        // Zjistíme maximální možnou pozici posunu do prava
                        var maximalniPosun = $(this).get(0).scrollWidth - $(this).get(0).clientWidth;

                        // Zjistí, na kterou stranu se má posunout
                        if(vlevo && !$(this).data('jeVlevo') ) {
                                // Řekneme skriptu, že jsme vlevo
                                $(this).data('jeVlevo', true);
                                // Posune se vlevo
                                $(this).stop().animate({ scrollLeft: 0 }, rychlost);
                        } else if ( !vlevo && $(this).data('jeVlevo') ) {
                                // Řekneme skriptu, že jsme vpravo
                                $(this).data('jeVlevo', false);
                                // Posunese vpravo
                                $(this).stop().animate({ scrollLeft: maximalniPosun }, rychlost);
                        }
                }, mouseLeave = function(e) {
                        // Zastaví posouvání
                        $(this).stop();
                        // Zjistíme, kam budeme posouvat při případném návratu kurzoru
                        $(this).data('jeVlevo', ($(this).data('jeVlevo') ? false : true));
                }, mouseEnter = function(e) {
                        // Zavoláme funkci mousemove, kterou jsme definovali nahoře
                        $(this).trigger("mousemove");
                };

                // Pro každý prvek předaný pluginu
                return this.each(function() {
                        $(this)
                        .addClass('posuvnik')
                        .data('jeVlevo', true)
                        .bind({
                                mousemove: mouseMove,
                                mouseleave: mouseLeave,
                                mouseenter: mouseEnter
                        });
                });

        };

})( jQuery );

Galerie

Program byl vytvořen v roce 2012.

 

Stáhnout

Staženo 384x (148.2 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

  Aktivity (1)

Program pro vás napsal Drahomír Hanák
Avatar
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.

Jak se ti líbí článek?
Celkem (1 hlasů) :
55555


 


Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery

 

 

Komentáře

Avatar
user
Redaktor
Avatar
user:

Čus,
jde u funkce animate() vypnout efekt, který způsobuje že pokud je posouvaný obsah moc dlouhý rychlost se automaticky několikanásobně zvětší...?
Díval jsem se do dokumentace ale nic vhodného jsem nenašel...
(Pokud to nejde tak bych musel použít ten setInterval?)

 
Odpovědět 19.4.2012 21:26
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:

V jQuery je možnost nastavit pouze trvání celé animace (tedy rychlost). Pokud bys chtěl rychlost proměnnou podle toho, jak velký je scrollovatelný obsah, můžeš si rychlost vypočítat. Třeba takto:

var prevedenaRychlost = (maximalniPosun/1000)*rychlost;

Kde rychlost bude rychlost přesunu o 1 pixel. maximalniPosun je právě ta velikost scrollovatelného obsahu. Nezapomeň pak změnit ve skriptu u .animate() proměnnou rychlost na prevedenaRychlost, aby ti to fungovalo ;)

 
Odpovědět 19.4.2012 22:02
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.