基于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通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jquery validate demo 基础
Oct 29 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
基于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文件上传你必须知道的几点
2015/10/20 PHP
php的扩展写法总结
2019/05/14 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
JavaScript国旗变换效果代码
2008/08/13 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
Python通过解析网页实现看报程序的方法
2014/08/04 Python
python有证书的加密解密实现方法
2014/11/19 Python
收集的几个Python小技巧分享
2014/11/22 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
详细分析Python垃圾回收机制
2020/07/01 Python
python 代码运行时间获取方式详解
2020/09/18 Python
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
几个常见的软件测试问题
2016/09/07 面试题
简单租房协议书
2014/04/09 职场文书
运动会口号16字
2014/06/07 职场文书
七一建党日演讲稿
2014/09/05 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
高考1977观后感
2015/06/04 职场文书
创业计划书之农家乐
2019/10/09 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL