A horizontal scroll bar (slider) based on jquery _jquery

Many methods are found, some cannot be implemented (the width of the scrolled content is unknown, but this method must be known), and others are not fully compatible with these browsers (Ie6,firefox,chrome). Finally, you decide to use jquery's slider control.
1. Download Jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js
2. Html

Copy Code code as follows:

<div id= "Topslider" runat= "Server" ></div>
<div id= "Scroll" runat= "Server" >
<div id= "Holder" >
Scrolling content
</div>
<div id= "Bottomslider" style= "margin-top:10px;margin-bottom:10px;" runat= "Server" ></div>

3. css

Copy Code code as follows:

<style>
#topslider {
width:98%;
height:6px;
Background: #BBBBBB;
position:relative;
}
#bottomslider {
width:98%;
height:6px;
Background: #BBBBBB;
position:relative;
}
. ui-slider-handle {
width:8px;
height:14px;
Position:absolute;
Top: -4px;
Background: #478AFF;
Border:solid 1px black;
}
#scroll {
width:100%;
margin-top:10px;
Overflow:hidden;
}
#holder {
width:100%;
}
</style>

4. js

Copy Code code as follows:

<script type= "Text/javascript" src= "Javascript/jquery-1.3.2.min.js" ></script>
<script type= "Text/javascript" src= "Javascript/jquery-ui-1.7.1.custom.min.js" ></script>
$ (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 ');
}