jQuery Girl
  1. jQuery Girl
  3. Défilement horizontal jQuery (cliquer et animer)
Intereting Posts
Comment exécuter JavaScript après la transition d’une page avec jQuery Mobile jQuery AJAX ne peut pas remplir la zone de sélection dans Internet Explorer Fond blanc dans la zone de sélection lors de l’affichage dans Chrome Ré-ordonner les positions div avec jQuery? Comment créer une table html à l’aide de données JSON? Extraction de données d’un object json dans jQuery ou JS Obtenir la valeur de la session actuelle en JavaScript? Mobile Safari preventDefault () ne fonctionne pas? Android fonctionne bien HTML5 et JavaScript met en pause toutes les vidéos lors du défilement Ajouter des Div sur Clic avec compteur et limite Afficher / masquer dans la liste déroulante, avec jQuery, en fonction de la valeur Comment obtenir toutes les valeurs dans un menu déroulant Select2? suggestions de modèles javascript / jquery Comment capturer l’événement de début de défilement sur iPhone / Android Valider le texte saisi en mode bootstrap

Défilement horizontal jQuery (cliquer et animer)

J’ai une série de divs flottant à l’infini dans une ligne horizontale. J’ai un div de largeur fixe contenant eux, débordement: caché. En fin de compte, j’aimerais appuyer sur les boutons divs / à gauche et à droite pour faire défiler les éléments (par rapport à l’utilisation de la barre de défilement).

J’ai du mal à faire travailler .animate (). Je veux que chaque clic déplace les éléments de la liste.

Il devrait fonctionner de manière similaire à la liste “Les clients qui ont acheté cet article ont également acheté” que vous pouvez faire défiler de la même manière. J’étais tenté d’essayer d’utiliser .mousedown et de le faire bouger tout en le maintenant (semblable au défilement réel), mais je voudrais d’abord faire cette approche plus facilement.

Voici le violon et le code:

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

HTML:

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!

Add position:relative to .item , comme ceci: 

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

Exemple de travail: http://jsfiddle.net/mattblancarte/stfzy/21/

Il y a encore quelques bugs dans votre configuration, mais cela devrait vous décoiffer. 🙂

Modifier::

Voici une solution rapide pour résoudre le bug où la liste glisserait 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'}); } }); });