基于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验证元素是否为空的两种常用方法
Mar 17 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
python merge、concat合并数据集的实例讲解
2018/04/12 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python实现数值积分方式
2019/11/20 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
大学毕业生自荐书怎么写?
2014/01/06 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
销售团队激励口号
2014/06/06 职场文书
学校党员对照检查材料
2014/08/28 职场文书
施工安全协议书范本
2014/09/26 职场文书
2014年法院工作总结
2014/11/24 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书