마우스가 움직일 때 슬라이드하는 Jquery 슬라이더

Question

마우스를 움직일 때 오른쪽 슬라이드를 할 수있는 jquery 슬라이더 스크립트를 찾고 있습니다. 누구든지 그런 종류의 대본을 알고 있습니까? this one과 같은 효과를 내고 싶지만 수직이 아닌 가로로 스크롤해야합니다.

Answer 1

이런 뜻입니까? 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/