2011-01-07 28 views
1

私はマウスを動かしている間、右にスライドすることができるjqueryスライダースクリプトを探しています。誰でもその種のスクリプトを知っていますか?私はthis oneのような効果を得たいですが、垂直ではなく水平にスクロールする必要があります。マウスの移動中にスライドするJqueryスライダー

答えて

8

このような意味ですか? jQuery UI Sliderを使用することは非常に基本的なことです。私はマウスカーソルの値に基づいてスライダの値を計算するmousemoveイベントにハンドラをアタッチします。

$(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); 
     } 

    }); 

}); 

それは正直に言うと、幻想的なコードではありませんが、それはjQueryのUIのスライダーとどのようにコードを使用して値を設定するために使用する方法の基本的な例を与えません。

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

+0

いいえ、それは何を意味しません、事は私はこのような効果を達成したいですhttp://articles.tutorboy.com/jquery/mouseover-auto-scroller-menu-using -jquery-and-css.htmlがありますが、スクロールは水平ではなく垂直でなければなりません。 – David

関連する問題