SOURCE

console 命令行工具 X clear

                    
>
console
$(document).ready(function() {

  var startX, dx, $xtVal = $('#xt-value'),
  $ruler = $('.ruler'),
  factor = 18,
  scale = 57.5;

  var rulers = [];
  for (var i = 0; i < scale; i++) {
    rulers[i] = ('<div class="ruler-scale">' + i + '.0</div>');
  }
  $('.ruler').empty().css('width', factor * scale * 10 + 'px').append(rulers.join(''));

  /** 滑尺选择数值 */
  $('.ruler-mask')
    .on('touchstart', function(e) {
    e.preventDefault();
    startX = e.originalEvent.touches[0].clientX;
  })
    .on('touchmove', function(e) {
    dx = e.originalEvent.touches[0].clientX - startX;
    startX = e.originalEvent.touches[0].clientX;
    $ruler.css('transform', function(index, value) {
      var curr = parseInt(value.match(/-?\d+/g)[4]),
      result;
      result = Math.min(0, Math.max( - factor * scale * 10, curr + dx));
      var ssss = (Math.floor(Math.abs(0 - result) / factor) * 0.1);
      $xtVal.text(ssss.toFixed(1));

      return 'translateX(' + result + 'px)';
    });
  });
  
  var defultVal = 5.5;
$xtVal.text(defultVal);
  $ruler.css('transform', 'translateX(' + -(defultVal * 10 * 18) + 'px)');
});
    <div id="xt-value"></div>
    <!--标尺-->
    <div class="ruler-container">
      <div class="ruler" style="width: 1350px; transform: translateX(-1025px);">
        <div class="ruler-scale">
          0.0
        </div>
        <div class="ruler-scale">
          1.0
        </div>
        <div class="ruler-scale">
          2.0
        </div>
        <div class="ruler-scale">
          3.0
        </div>
        <div class="ruler-scale">
          4.0
        </div>
        <div class="ruler-scale">
          5.0
        </div>
        <div class="ruler-scale">
          6.0
        </div>
        <div class="ruler-scale">
          7.0
        </div>
      </div>
      <div class="ruler-mask">
      </div>
    </div>
// Color variables (appears count calculates by raw css)
$color0: #ddebf0; // Appears 3 times
$color1: #0c4965; // Appears 3 times
$color2: #ffffff; // Appears 3 times
$color3: #eeeeee; // Appears 2 times
// Width variables (appears count calculates by raw css)
$width9: 48px; // Appears 2 times
// Height variables (appears count calculates by raw css)
$height1: 48px; // Appears 2 times
$height2: 88px; // Appears 2 times
$height4: 100%; // Appears 2 times    
* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
}

.ruler-container {
  background-image: url(http://120.55.51.236:8000/ruler_bg.png);
  height: 141px;
  margin-left: 21px;
  margin-top: 80px;
  overflow: hidden;
  width: 649px;
  .ruler {
    -moz-transform: translateX(-1260px);
    -ms-transform: translateX(-1260px);
    -o-transform: translateX(-1260px);
    -webkit-transform: translateX(-1260px);
    background-image: url(http://120.55.51.236:8000/ruler.png);
    background-repeat: repeat-x;
    height: $height4;
    left: 325px;
    transform: translateX(-1260px);
    width: 4594px;
    .ruler-scale {
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      color: $color2;
      float: left;
      font-size: 32px;
      height: 44px;
      left: -40px;
      line-height: 32px;
      padding: 6px 0;
      top: 70px;
      width: 80px;
    }
    .ruler-scale+.ruler-scale {
      margin-left: 100px;
    }
  }
  .ruler-mask {
    background-image: url(http://120.55.51.236:8000/ruler_mask.png);
    background-repeat:no-repeat;
    height: $height4;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}