Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

jQuery posuvník

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

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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 387x (148.2 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Program pro vás napsal Drahomír Hanák
Avatar
Jak se ti líbí článek?
1 hlasů
Autor v současné době studuje Informatiku. Zajímá se o programování, matematiku a grafiku.
Miniatura
Všechny články v sekci
JavaScript zdrojákoviště - jQuery
Aktivity (1)

 

 

Komentáře

Avatar
user
Redaktor
Avatar
user:19.4.2012 21:26

Č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:19.4.2012 22:02

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.