基于jquery的横向滚动条（滑动条）

查找了很多方法，有些不能实现（被滚动内容的宽度未知，但使用这种方法必须已知），其它的不能完全兼容这些浏览器（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')); }

　　推荐阅读

　　基于jquery循环map功能的代码

废话少说，看代码复制代码代码如下: var map = { 地名: ["北京","天津","上海"], 民族: ["汉族","藏族","维吾尔族"] }; $.each(map,function(key,values){ console.log(key); $(values).each(function(){ consol>>>详细阅读

本文标题：基于jquery的横向滚动条（滑动条）

地址：http://www.17bianji.com/kaifa2/JS/24900.html

1/2 1