많은 방법이 발견되었지만 일부는 구현되지 않았으며(스크롤된 콘텐츠의 너비는 알 수 없지만 이 방법을 사용할 때 알아야 함), 일부는 이러한 브라우저(IE6, Firefox, Chrome)와 완전히 호환되지 않습니다. 마침내 JQuery의 Slider 컨트롤을 사용하기로 결정했습니다.
1. jquery-1.3.2.min.js, jquery-ui-1.7.1.custom.min.js
2. HTML
4. 🎜>
코드 복사
코드는 다음과 같습니다.
$(document).ready(function(){ $("#topslider").slider({ animate: true, change : handlerSliderChange, 슬라이드: handlerSliderSlide,
stop:handleTopSliderStop
})
$("#bottomslider").slider({
animate: true,
change: handlerSliderChange,
slide: handlerSliderSlide,
stop:handleBottomSliderStop
})
});
function handlerSliderChange(e, ui)
{
var maxScroll = $("#scroll ").attr("scrollWidth") - $("#scroll").width();
$("#scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000 );
}
function handlerSliderSlide(e, ui)
{
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width ();
$("# 스크롤").attr({scrollLeft: ui.value * (maxScroll / 100) })
}
function handlerTopSliderStop(e, ui)
{
$("#bottomslider").slider('value',$("#topslider").slider('value'))
}
function handlerBottomSliderStop(e, ui)
{
$("#topslider") .slider('value',$("#bottomslider").slider('value'))
}