jQuery posuvník

Jednoduchý jQuery plug-in, ktorý posúva obsahom elementu podľa toho, na ktorej strane sa nachádza kurzor myši. Plugin má jediný argument a tým je rýchlosť scrollovanie.

Online ukážka:

Ukážka jQuery pluginu posuvník

Jednoduché použitie:

$(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 );

Galéria