Javascript Girl
  1. Javascript Girl
  3. Comment suivre. Position animale gauche
Intereting Posts
Comment puis-je générer des graphiques dynamiques avec des données MySQL? Comment puis-je inclure le jeton CSRF de Django 1.2 dans un formulaire HTML généré par Javascript? Ordre de script pour jquery avec bootstrap JQuery Manual Dash redimensionnable Je suis en difficulté avec l'optimiseur requérant et les modules non AMD TypeError: $ est indéfini dans jquery Quel événement est déclenché lorsque window.print () est appelé? Chargement du flux RSS avec AJAX: alternatives à Google Feed API? Regardez le visage avec des styles supplémentaires dans Gear S2 sur Tizen SDK Vérifiez si une clé est en panne? Javascript Supprime les chaînes au début et à la fin Angular 1.6.0: erreur "Possibilité de suppression non contrôlée" Comment extraire le nombre d'une chaîne dans javascript Ajoutez id pour créer dynamiquement <div> JavaScript Document.Write Remplace tout le contenu du corps lors de l'utilisation d'AJAX

Comment suivre. Position animale gauche

Bonjour, j'ai ce JQuery qui déplace un div à gauche et à droite lorsque survolé les boutons gauche et droit, mais j'ai besoin qu'il s'arrête lorsque la position de l'image est à 0px;

Mon code actuel – https://jsfiddle.net/38da9pca/2/ 

$(function() { $('#right').on('mouseenter', rscroll); $('#left').on('mouseenter', lscroll); $('#right, #left').on('mouseleave', function() { $('#bg').stop(); }); function rscroll() { $('#bg').animate({ left: '-=25' }, 10, rscroll); } function lscroll() { $('#bg').animate({ left: '+=25' }, 10, lscroll); } });

Cependant, je ne peux pas sembler suivre la position #bg laissée. J'ai fatigué .position().left .offset().left et .offset().left et les deux donnent un résultat statique lorsque console.log(); Au lieu de changer radicalement pendant le défilement.

Vous devez essentiellement vérifier si l'élément touche déjà ses limites

  • Si c'est le cas, ne faites rien
  • Si ce n'est pas le cas, vérifiez si le prochain changement sera dépassé les limites
    • Si c'est le cas, ne bouge que par la distance restante.
    • Si ce n'est pas le cas, passez 25 pixels

En outre, vous devez cacher vos objets jQuery pour une meilleure performance, comme je l'ai fait ici.

( Demo ) 

 $(function() { var bg = $('#bg'), left, maxLeft, maxRight; $('#right').on('mouseenter', rscroll); $('#left').on('mouseenter', lscroll); $('#right, #left').on('mouseleave', function() { bg.stop(); }); function rscroll() { maxRight = (bg.width() - $(window).width()) * -1; left = bg.position().left; if(left > maxRight) { bg.animate({ left: '-=' + (left + 25 > maxRight ? 25 : left) }, 10, rscroll); } } function lscroll() { maxLeft = bg.width() - $(window).width(); left = bg.position().left; if(left < 0) { bg.animate({ left: '+=' + (maxLeft - left > 25 ? 25 : left) }, 10, lscroll); } } });

Essayez ceci: https://jsfiddle.net/38da9pca/4/

Cela fonctionne en disant seulement animé s'il n'a pas parcouru plus loin que sa largeur – largeur intérieure de la fenêtre

Et pour la gauche si elle ne s'est pas déroulée après 0. 

 $(function () { var bg = $('#bg'); $('#right').on('mouseenter', rscroll); $('#left').on('mouseenter', lscroll); $('#right, #left').on('mouseleave', function () { bg.stop(); }); function rscroll() { if (bg.position().left * -1 > bg.width() - $(window).innerWidth()) { bg.stop(); return; } bg.animate({ left: '-=25' }, 10, rscroll); } function lscroll() { if (bg.position().left > 0) { bg.stop(); return; } bg.animate({ left: '+=25' }, 10, lscroll); } });