js实现滑动条效果

显示效果如图所示：

素材图片：

1.html代码：

<span style="font-size:18px;"><div class="grade_warp">
      <div class="User_ratings User_grade">
       <div class="ratings_bars">
        <span id="title0">0</span>
        <span class="bars_10">0</span>
        <div class="scale" id="bar0">
         <div></div>
         <span id="btn0"></span>
        </div>
        <span class="bars_10">10</span>
       </div>
      </div>
     </div>	
      
     <script type="text/javascript">
     scale = function (btn, bar, title) {
      this.btn = document.getElementById(btn);
      this.bar = document.getElementById(bar);
      this.title = document.getElementById(title);
      this.step = this.bar.getElementsByTagName("DIV")[0];
      this.init();
     };
     scale.prototype = {
      init: function () {
       var f = this, g = document, b = window, m = Math;
       f.btn.onmousedown = function (e) {
        var x = (e || b.event).clientX;
        var l = this.offsetLeft;
        var max = f.bar.offsetWidth - this.offsetWidth;
        g.onmousemove = function (e) {
         var thisX = (e || b.event).clientX;
         var to = m.min(max, m.max(-2, l + (thisX - x)));
         f.btn.style.left = to + 'px';
         f.ondrag(m.round(m.max(0, to / max) * 100), to);
         b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
        };
        g.onmouseup = new Function('this.οnmοusemοve=null');
       };
      },
      ondrag: function (pos, x) {
       this.step.style.width = Math.max(0, x) + 'px';
       this.title.innerHTML = pos / 10 + '';
      }
     }
     new scale('btn0', 'bar0', 'title0');
     </script>
</span>

2.css样式

<span style="font-size:18px;">.grade_warp{width:450;float: left;margin-left: 10px;}
   .User_grade{width:100%;}
    .User_ratings {overflow: hidden;}
   .User_ratings .ratings_title{width:815px;height:78px;font-family:"微软雅黑","宋体";font-size:24px;color:#aaaaaa;}
   .User_ratings .ratings_title01{width:407px;height:auto;font-family:"微软雅黑","宋体";font-size:14px;color:#aaaaaa;}
   .User_ratings .ratings_bars{width:407px;height:34px;padding-top: 5px;}
   .User_ratings .ratings_bars #title0{width:25px;height:25px;text-align:center;border:1px solid #bfbebe;line-height:25px;font-family:Georgia, "Times New Roman", Times, serif;font-size:14px;float:left;color:#a0a0a0;margin-right:10px;background:#fff;}
   .User_ratings .ratings_bars .bars_10{font-family:Georgia, "Times New Roman", Times, serif;font-size:18px;line-height:25px;float:left;color:#a0a0a0;}
   .User_ratings .ratings_bars .scale{width:299px;height:13px;float:left;margin:7px 10px auto 10px;position:relative;background:url(../../images/terminal/progress02.png) 0 0 no-repeat;}
   .User_ratings .ratings_bars .scale div{width:0px;position:absolute;width:0;left:0;height:13px;bottom:0;background:url(../../images/terminal/progress02.png) 0 -14px no-repeat;}
   .User_ratings .ratings_bars .scale span{width:10px;height:26px;position:absolute;left:-2px;top:-7px;cursor:pointer;background:url(../../images/terminal/j.png) no-repeat;}

</span>