Curseur avec boutons. Comment améliorer?

Question

J'ai besoin de faire un curseur.

J'ai du contenu (qui devrait être décalé horizontalement) et deux boutons - "droit" et "gauche".

Si vous appuyez sur le bouton et le maintenez enfoncé, le contenu commence à se déplacer (dans la direction appropriée). Si vous ne maintenez pas le bouton, le mouvement s'arrête. Ce comportement copie le comportement d'une barre de défilement de fenêtre habituelle.

j'ai écrit un code:

var animateTime = 1, 
    offsetStep = 5; 

//event handling for buttons "left", "right" 
$('.bttR, .bttL') 
    .mousedown(function() { 
     scrollContent.data('loop', true).loopingAnimation($(this)); 
    }) 
    .bind("mouseup mouseout", function(){ 
     scrollContent.data('loop', false); 
    }); 


$.fn.loopingAnimation = function(el){ 
    if(this.data('loop') == true){ 
     var leftOffsetStr; 

     leftOffsetInt = parseInt(this.css('marginLeft').slice(0, -2)); 

     if(el.attr('class') == 'bttR') 
      leftOffsetStr = (leftOffsetInt - offsetStep).toString() + 'px'; 
     else if(el.attr('class') == 'bttL') 
      leftOffsetStr = (leftOffsetInt + offsetStep).toString() + 'px'; 


     this.animate({marginLeft: leftOffsetStr}, animateTime, function(){ 
      $(this).loopingAnimation(el); 
     }) 
    } 
    return this; 
} 

Mais il a un certain nombre de choses que je n'aime pas:

1. Il appelle toujours l'animation de la fonction (loopingAnimation) - Je pense que cela est une charge supplémentaire (pas bon).
2. En déplaçant du contenu, il "tressaille et tremble" - (ce n'est pas joli).

Comment puis-je résoudre ce problème plus avec élégance et sans les inconvénients de mon code?

Answer 1

Je ne pense pas que vous puissiez contourner la boucle en passant par la fonction ou les secousses et tremblements si vous animez plus d'un pixel à la fois.

Mais j'ai essayé de nettoyer votre code un peu, parce que vous pouvez utiliser +=1px ou -=1px avec la fonction d'animation: (Mise à jour: suppression de la fonction d'animation, mais vous pouvez utiliser pour référence ultérieure +=1px ou -=1px)

$(document).ready(function(){ 

    var animateTime = 1, 
     offsetStep = 5, 
     scrollWrapper = $('#wrap'); 

//event handling for buttons "left", "right" 
$('.bttR, .bttL') 
    .mousedown(function() { 
     scrollWrapper.data('loop', true); 
     loopingAnimation($(this), $(this).is('.bttR')); 
    }) 
    .bind("mouseup mouseout", function(){ 
     scrollWrapper.data('loop', false).stop(); 
     $(this).data('scrollLeft', this.scrollLeft); 
    }); 

    loopingAnimation = function(el, dir){ 
     if(scrollWrapper.data('loop')){ 
      var sign = (dir) ? offsetStep : -offsetStep; 
      scrollWrapper[0].scrollLeft += sign; 
      setTimeout(function(){ loopingAnimation(el,dir) }, animateTime); 
     } 
     return false; 
    }; 

}) 

Parce que j'ai TOC et n'aime pas changeurs lent, je made a demo avec la fonctionnalité de glisser et de mousewheel souris et de fonctionnalité. Voici le code supplémentaire:

Mise à jour: En fait, je pense que si vous n'utilisez pas la fonction d'animation jQuery, vous obtenez un défilement plus lisse. J'ai mis à jour le code ci-dessus, et the demo.

$('#wrap') // wrap around content 
    .mousedown(function(event) { 
     $(this) 
      .data('down', true) 
      .data('x', event.clientX) 
      .data('scrollLeft', this.scrollLeft); 
     return false; 
    }) 
    .mouseup(function (event) { 
     $(this).data('down', false); 
    }) 
    .mousemove(function (event) { 
     if ($(this).data('down') == true) { 
      this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; 
     } 
    }) 
    .mousewheel(function (event, delta) { 
     this.scrollLeft -= (delta * 30); 
    }) 
    .css({ 
     'overflow' : 'hidden', 
     'cursor' : '-moz-grab' 
    });