집 >
기사 > 웹 프론트엔드 > jquery_jquery를 기반으로 한 가로 스크롤 막대(슬라이더 막대)
jquery_jquery를 기반으로 한 가로 스크롤 막대(슬라이더 막대)
- WBOY원래의
- 2016-05-16 18:10:131079검색
많은 방법이 발견되었지만 일부는 구현되지 않았으며(스크롤된 콘텐츠의 너비는 알 수 없지만 이 방법을 사용할 때 알아야 함), 일부는 이러한 브라우저(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'))
}
성명:본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.