2011-01-07 11 views
1

Ich bin auf der Suche nach einem Jquery-Slider-Skript, das in der Lage ist, von rechts nach links zu gleiten, während ich meine Maus bewege. Wer kennt diese Art von Skript? Ich möchte einen Effekt wie this one erreichen, aber es sollte horizontal, nicht vertikal gescrollt werden.Jquery Slider, der während der Mausbewegung gleitet

Antwort

8

Meinst du so etwas? Es ist eine sehr einfache Sache, die die jQuery UI Slider verwendet. Ich füge einen Handler an das mousemove-Ereignis an, das nur berechnet, was der Wert für den Schieberegler sein soll (basierend auf dem Wert der Mauskoordinaten).

$(function() { 

    var range = 100, 
     sliderDiv = $("#slider"); 

    // Activate the UI slider 
    sliderDiv.slider({ 
     min: 0, 
     max: range 
    }); 

    // Number of tick marks on slider 
    var position = sliderDiv.position(), 
     sliderWidth = sliderDiv.width(), 
     minX = position.left, 
     maxX = minX + sliderWidth, 
     tickSize = sliderWidth/range; 


    $(this).mousemove(function(e) { 

     // If within the slider's width, follow it along 
     if (e.pageX >= minX && e.pageX <= maxX) { 
      var val = (e.pageX - minX)/tickSize; 
      sliderDiv.slider("value", val); 
     } 

    }); 

}); 

Es ist nicht fantastisch Code, um ehrlich zu sein, aber es hat ein einfaches Beispiel dafür, wie die jQuery UI Schieberegler verwendet werden und wie der Wert setzen Code.

Beispiel: http://jsfiddle.net/jonathon/qAMWQ/

+0

nein, das ist nicht das, was ich meinte, die Sache ist, ich einen Effekt wie dies erreichen will http://articles.tutorboy.com/jquery/mouseover-auto-scroller-menu-using -jquery-and-css.html aber es sollte horizontal gescrollt werden, nicht vertikal. – David