jQuery Défilement Horizontal (cliquez sur et animer)

J'ai une série de divs flottant à l'infini sur une ligne horizontale. J'ai un fixe largeur du div conteneur eux, overflow:hidden. En fin de compte, je tiens à appuyer sur les divs/boutons de gauche et de droite pour faire défiler les objets (au lieu d'utiliser la barre de défilement).

Je vais avoir du mal à obtenir .animate() de travail. Je veux à chaque clic de souris pour déplacer les éléments dans la liste sur.

Il devrait travaux similaires aux Amazones "les Clients Ayant Acheté Cet Article ont Également Acheté" liste de ce que vous pouvez faire défiler de la même manière. J'ai été tenté d'essayer de l'utiliser .mousedown et ont de se déplacer tout en maintenant (similaire à vrai défilement) mais vous voulez faire plus facile d'abord.

Voici le violon et le code:

http://jsfiddle.net/stfzy/16/

HTML:

<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
    <div class='list'>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class='item'>
        </div>
        <div class="item">
        </div>
    </div>
</div>

CSS:

 #container{
width:340px;
    height:50px;
}

#list-container {
overflow:hidden;    
width: 300px;  
float:left;    
}

.list{
    background:grey;
min-width:700px;
    float:left;
}


#arrowR{
background:yellow;
    width:20px;
    height:50px;
    float:right;
    cursor:pointer;
}


#arrowL{
background:yellow;
    width:20px;
    height:50px;
    float:left;
    cursor:pointer;
}

.item{
    background:green;
width:140px;
    height:40px;
    margin:5px;
    float:left;
}

jQuery

$(document).ready(function() {

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'-=300px'});

    });

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'+=300px'});

    });

});

Toute aide appréciée. Merci!

InformationsquelleAutor jstacks | 2012-11-18
  1. 19

    Ajouter position:relative à .item, comme suit:

    .item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

    De travail exemple: http://jsfiddle.net/mattblancarte/stfzy/21/

    Il y a un peu plus de bugs dans votre configuration, mais cela devrait vous permettre de décoller. 🙂

    Edit::

    Ici est une solution rapide pour résoudre le bogue où la liste de glisser trop loin dans les deux sens:

    $(document).ready(function() {

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function(){
        if(index < endIndex ){
          index++;
          $item.animate({'left':'-=300px'});
        }
    });

    $('div#arrowL').click(function(){
        if(index > 0){
          index--;            
          $item.animate({'left':'+=300px'});
        }
    });

});
    • Génial! Et je vois ce que tu veux dire au sujet de plus de bugs... je suppose que vous faites référence au fait que ma liste a un début et une fin. Cependant, il a besoin de boucle pour travailler efficacement. Hmmm... le temps de comprendre que l'un. Merci encore.
    • Ou peut-être que je vais provoquer les boutons de flèche pour désactiver lorsqu'il n'y a pas plus de contenu... sans doute une meilleure option.
    • Heureux de vous aider! Si vous ne l'avez pas déjà deviné, vous pouvez suivre la position de défilement par l'affectation d'un indice du début de la 0 puis de calculer un max indice basé sur le nombre d'éléments dans la liste. Si vous frappez la min, désactiver le bouton de gauche. Si vous avez atteint le max, désactiver le bouton de droite. L'espoir qui fait sens! Ce n'est pas la seule façon d'aller à ce sujet, mais c'est une solution. 🙂
    • Je ne suis pas trop bonne avec jQuery donc je n'avais pas encore le comprendre. C'est vraiment utile, merci! Souhaitez-vous arriver à être en mesure de me référer à la documentation sur l'indexation? Je ne suis pas vraiment sûr de savoir comment cela fonctionne. Aussi, quelle serait la démarche la faire revenir au premier set? Vous ne savez pas si c'est beaucoup plus difficile, mais curieux de savoir comment les deux options de l'air...
    • Pas de soucis. Il n'y a vraiment pas de toute la documentation sur la façon de le faire. Vous pouvez le trouver sur google, mais je suis juste allé de l'avant et de construire une solution pour vous. découvrez ce violon. Laissez-moi savoir si vous avez des questions sur la façon dont il fonctionne!
    • Wow. Je vous remercie. Ces notes aide énormément aussi, donc je vois ce qu'il se passe. 🙂
    • Excellent! Content d'avoir pu aider. Le seul petit peu, j'ai laissé de côté, il est bien de comptabilité pour le "n" éléments de la liste lors du calcul de la endIndex. Je vous laisse réfléchir... (Indice: découvrez quelques-unes de la vanille JS méthodes de l'objet Math)
    • Si vous ne voulez pas de garder une trace de l'index, vous pouvez également utiliser: if (($('div.boîte:last').width() + $('div.boîte:last').offset().à gauche) < ($('#wrapper').width() + $('#wrapper').offset().gauche)), puis de désactiver le bouton de droite. D'autre de la même façon de désactiver le bouton de gauche avec la première place de dernier. Bien sûr, beaucoup de refactoring en termes de mise en cache et l'optimisation est possible.

    InformationsquelleAutor Matthew Blancarte