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


Posted in Javascript onFebruary 24, 2011

查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(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')); 
}
Javascript 相关文章推荐
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
Oct 24 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
基于JQuery的日期联动实现代码
Feb 24 #Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 #Javascript
jquery的键盘事件修改代码
Feb 24 #Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 #Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 #Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 #Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 #Javascript
You might like
php url路由入门实例
2014/04/23 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php-msf源码详解
2017/12/25 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
python中单下划线_的常见用法总结
2018/07/10 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
python 安装移动复制第三方库操作
2020/07/13 Python
铲车司机岗位职责
2014/03/15 职场文书
投资协议书范本
2014/04/21 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
会计求职自荐信范文
2015/03/04 职场文书
升学宴家长致辞
2015/07/27 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技