基于jquery的横向滚动条（滑动条）_jquery

查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（IE6，Firefox，Chrome）。最后决定使用JQuery的Slider控件。
1. 下载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'));
}

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• javascript怎么将值类型强制转为字符串
• javascript中什么是位运算符
• javascript怎么判断字符串是否是数字
• 总结分享： 6 种JavaScript的打断点的方...
• 基于jquery的横向滚动条（滑动条）_jquer...

• 框架初始类文件
• 前端应用
• MVC目录结构规划
• 博客前后台功能介绍