基于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 相关文章推荐
jquery实现的网页自动播放声音
Apr 30 Javascript
javascript关于继承解析
May 10 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
js实现随机8位验证码
Jul 24 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
如何用JS实现简单的数据监听
May 06 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php中stream(流)的用法
2014/03/25 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python实现自动重启本程序的方法
2015/07/09 Python
python Django批量导入不重复数据
2016/03/25 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
基于python实现学生信息管理系统
2019/11/22 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
流行文化收藏品:Sideshow(DC漫画,星球大战,漫威)
2019/03/17 全球购物
妇科医生自荐信
2013/11/05 职场文书
预备党员表决心书
2014/03/11 职场文书
小学节能减排倡议书
2014/05/15 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
在js中修改html body的样式
2021/11/11 Javascript
Python实现照片卡通化
2021/12/06 Python