基于jquery的横向滚动条（滑动条）
发布时间：2013-07-13 编辑：jiaochengji.com
ASP.Net的GridView本身不带滚动条，可通过Panel实现。但是Windows自带的横向滚动条只支持显示在下方，为了使用方便，需要在上下方都显示横向滚动条。
ASP.Net的GridView本身不带滚动条，可通过Panel实现。但是Windows自带的横向滚动条只支持显示在下方，为了使用方便，需要在上下方都显示横向滚动条。
查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（IE6，Firefox，Chrome）。最后决定使用jquery的Slider控件。
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">
滚动内容
</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
<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'));
}
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">
滚动内容
</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
复制代码 代码如下:
<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'));
}
您可能感兴趣的文章：
基于jquery的横向滚动条（滑动条）
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
javascript禁用浏览器滚动条的方法
利用div+jquery自定义滚动条样式的2种方法
jquery滚动条插件
jquery easyui滚动条部分设置介绍
学习：使用CSS修改IE浏览器滚动条的参数
CSS自定义滚动条样式与颜色
html中去掉textarea右侧滚动条和右下角拖拽
jQuery滚动条插件 Tiny Scrollbar
上一篇：浏览器常用高宽的jquery插件
下一篇：基于JQuery的日期联动实现代码
[关闭]