基于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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
JS中FormData类实现文件上传
Mar 27 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中Session的概念
2006/10/09 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
ExtJS 入门
2010/10/29 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
javascript计时器详解
2015/02/28 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
简单的Python2.7编程初学经验总结
2015/04/01 Python
python简单实现旋转图片的方法
2015/05/30 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python os.access()用法实例
2019/02/18 Python
python障碍式期权定价公式
2019/07/19 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python 字典中的所有方法及用法
2020/06/10 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
实习生评语
2014/04/26 职场文书
高三复习计划
2015/01/19 职场文书
学生逃课检讨书
2015/02/17 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
刑事辩护词范文
2015/05/21 职场文书
Python学习之异常中的finally使用详解
2022/03/16 Python