基于jquery的横向滚动条(滑动条)


查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(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'));
}



相关阅读:
Linux系统下运行命令时CTRL+Z的作用
JavaScript中获取元素索引的函数
javascript 输入文本框时的友好提示
JavaScript 无符号右移赋值操作
php&java(二)
监测Linux系统 10条最佳成功经验
VM共享文件夹在Linux下如何正确使用
把textarea中字符串里含有的回车换行替换成&lt;br&gt;的javascript代码
asp.net 文章内容分页显示的代码
让css使网页图片半透明
mysql让存储结果分页,用于复杂查询
WordPress中非插件实现嵌套回复效果的方法
ZBLOG1.8的验证码及反垃圾评论解决方案
JavaScript CSS创建右击菜单效果代码
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4