jquery横向滚动条滑动条简单例子

发布时间:2021-01-05编辑:脚本学堂
一个jquery横向滚动条的例子,平时见过的jquery滚动条效果,多是竖向的滚动条,这里分享一个JQuery的Slider控件实现的横向滑动条代码。

jquery/scrollbar/ target=_blank class=infotextkey>jquery滚动条

问题分析:
asp.net的gridview本身不带滚动条,可通过panel实现。
windows自带的横向滚动条只支持显示在下方,需要在上下方都显示横向滚动条。

这里使用jquery的Slider控件,帮助实现一个横向的jquery滚动条效果。

步骤如下:

1、下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js

2、html部分
 

复制代码 代码示例:
<div id="topslider" runat="server"></div>
<div id="scroll" runat="server">
<div id="holder">
滚动内容 (jquery滚动条效果---横向滚动条代码---测试用例)
</div>
<div id="bottomslider" style="margin-top:10px;margin-bottom:10px;" runat="server"></div>

3、css样式
 

复制代码 代码示例:
<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脚本(jquery滚动条代码部分)
 

复制代码 代码示例:
<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'));
}