基于jquery的横向滚动条(滑动条)
2011-02-24 00:00
751 查看
查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome)。最后决定使用JQuery的Slider控件。
1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js
2. Html
3. css
4. js
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')); }
相关文章推荐
- 基于jquery的横向滚动条(滑动条)
- 基于jQuery产品图片横向滚动 自定义滚动条
- 基于jQuery的横向连续滚动【原创】
- jQuery实现横向滑动切换效果
- 基于jQuery的表格特效(隔行、滑动、点击变色)
- jquery特效分享-一款基于jQuery的仿百度首页滑动选项卡
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- jquery实现仿Flash的横向滑动菜单效果代码
- jQuery 树形菜单(竖向点击和横向滑动)
- jquery 横向滑动,下一步上一步。
- 一款基于jQuery的图片左右滑动焦点图
- jquery滑动横向二级菜单特效
- 基于jQuery左右滑动切换特效 附源码
- 基于jQuery的图片展示(横向滚动,可左右控制)
- 仿Flash的jquery横向滑动菜单
- 动漫网站基于jquery的横向手风琴特效
- 基于jQuery实现的仿百度首页滑动选项卡效果代码
- jquery 实现横向滑动自动切换源码(同时显示多张图片)
- jQuery 模拟横向滚动条
- 一款基于jQuery的图片左右滑动焦点图