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

• 摘要：查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome)。最后决定使用JQuery的Slider控件。1.下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js2.Html<divid="topslider"runat="server"></div><divid=&quo

• 查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(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的横向滚动条（滑动条）Script的内容，更多 浏览器 Firefox Chrome JQuery 的内容，请您使用右上方搜索功能获取相关信息。

来自  https://www.aliyun.com/jiaocheng/1057307.html

来自  https://www.jb51.net/article/26351.htm