Lisse scroller basé sur la position de la souris (Jquery)

HI!

Je voudrais créer une barre de défilement Lisse basé sur la position de la souris. L'idée est de créer un div extérieure avec une largeur fixe. Le contenu est très large et a pour faire défiler vers la gauche ou la droite, basé sur la position de la souris. Ce serait formidable si le contenu est "infini" ou "interminable". Le contenu est d'une très grande image qui se répète 'seamelesly'.

Quelqu'un peut-il m'aider à créer ce en jQuery?

Merci à l'avance!

Alex

Vous pouvez commencer à écrire quelque chose et laissez-nous savoir quand vous êtes coincé.

OriginalL'auteur Alex | 2011-05-26

  1. 12

    Vous pouvez définir une image comme arrière-plan de la div et d'animer la background-position avec jquery. (et parce qu'il m'a intéressé, voici une mise en œuvre)

    démo http://jsfiddle.net/gaby/72yhW/

    html

    <div class="backdrop">
    <div class="direction left"></div>
    <div class="direction right"></div>
</div>

    css

    .backdrop{
    position:relative;
    height:300px; /*could be anything really..*/
    width:400px; /*could be anything really..*/
    border:3px solid #6699ff;
    background: url('YOUR IMAGE PATH GOES HERE') 0 0 repeat-x;
}

.direction{
    position:absolute;
    width:50%;
    height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}

    jquery

    $(function(){
    var x=0,
        y=0,
        rate=0,
        maxspeed=10;
    var backdrop = $('.backdrop');

    $('.direction', backdrop).mousemove(function(e){
        var $this = $(this);
        var left = $this.is('.left');

        if (left){
            var w = $this.width();
            rate = (w - e.pageX - $(this).offset().left + 1)/w;
        }
        else{
            var w = $this.width();
            rate = -(e.pageX - $(this).offset().left + 1)/w;
        }
    });

    backdrop.hover(
        function(){
            var scroller = setInterval( moveBackdrop, 10 );
            $(this).data('scroller', scroller);
        },
        function(){
            var scroller = $(this).data('scroller');
            clearInterval( scroller );
        }
    );   

    function moveBackdrop(){
        x += maxspeed * rate;
        var newpos = x+'px '+y+'px';
        backdrop.css('background-position',newpos);
    }
});
    Merci Gaby! Vous m'avez aidé et je suis très contente du résultat!
    j'ai fait un changement, parce que la façon dont j'ai été le calcul de l'offset a été incorrect. Utilisez le code actuel.
    Salut à vérifier cela. Juste une idée de comment le faire puisque ul>li ne pas utiliser background-position. jsfiddle.net/pcproff/NCrkE/2
    Vous pouvez également ajouter overflow:hidden sur le .backdrop pour supprimer les barres de défilement et de supprimer les width:100% puisque c'est un div.. avec des altérations
    Regardez jsfiddle.net/NCrkE/5 Pas besoin de localiser les éléments. Utilisez simplement la largeur de la toile de fond et la yearlist pour min/max. (également définir la largeur de chaque année à 9%, comme vous l'avez 11 ans affiche..)

    OriginalL'auteur Gabriele Petrioli

  2. 2

    Il y a deux existantes impressionnant de plugins jQuery qui font exactement ce que vous cherchez:

    1) http://manos.malihu.gr/jquery-thumbnail-scroller

    2) http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/

    Numéro 1 est plus raffiné qu'il est plus doux d'action de défilement et peut éventuellement mettre en évidence l'actuel planait au-dessus de l'élément.

    OriginalL'auteur Peter

  3. 1

    Il y a un plugin jQuery appelé Lisse De Défilement Div qui fait exactement cela. Elle fait défiler le contenu en douceur et vous pouvez le contrôler en le survolant avec la souris sur les deux points d'accès (à gauche et à droite, visible ou invisible) à l'intérieur de la barre de défilement. Il y a une option pour l'infini défilement.

    OriginalL'auteur tkahn