基于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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
Oct 09 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
原生JS发送异步数据请求
Jun 08 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
vue实现移动端拖动排序
Aug 21 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python常用模块介绍
2014/11/21 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
python中调试或排错的五种方法示例
2019/09/12 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
公司中秋节活动方案
2014/02/12 职场文书
社区服务活动总结
2014/05/07 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
战马观后感
2015/06/08 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js
如何利用python实现列表嵌套字典取值
2022/06/10 Python