Many methods were found, some are not implemented (the width of the scrolled content is unknown, but must be known when using this method), others are not fully compatible with these browsers (IE6, Firefox, Chrome). Finally decided to use JQuery's Slider control.
1. Download jquery-1.3.2.min.js, jquery-ui-1.7.1.custom.min.js
2. Html
3. css
4. js
$(document).ready(function(){
$("#topslider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
stop:handleTopSliderStop
});
$("#bottomslider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide,
stop:handleBottomSliderStop
});
});
function handleSliderChange(e, ui)
{
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width();
$("#scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}
function handleSliderSlide(e, ui)
{
var maxScroll = $("#scroll").attr("scrollWidth") - $("#scroll").width();
$("# scroll").attr({scrollLeft: ui.value * (maxScroll / 100) });
}
function handleTopSliderStop(e, ui)
{
$("#bottomslider"). slider('value',$("#topslider").slider('value'));
}
function handleBottomSliderStop(e, ui)
{
$("#topslider") .slider('value',$("#bottomslider").slider('value'));
}
Statement:The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn