代码之家 › 专栏 › 技术社区 › shamim

如何设置范围div上的点?

slice model-view-controller html

shamim · 技术社区 · 7 年前

div 在我的asp.net MVC项目中,最左边的点和最右边的点分别包含max和min值,如(max=400和min=0)。我想用给定的范围设置div上的点。

例如:当我将399设置为点值时,我的div如下图所示。

如何设置范围上的点 div ?

1 回复 | 直到 7 年前

Flubssen 7 年前

像这样的

   $('.scoreContainer').find('.score').each(function() {
      var high = $(this).attr('data-high'),
        low = $(this).attr('data-low'),
        score = $(this).attr('data-score');
      var position = ((score - low) / (high - low)) * 100

      $(this).find('.arrow').css('right', position + "%");
      $(this).find('.arrow').html('<span>' + score + '</span>');
    });

    .scoreContainer {
  background: #ff3232;
  background: -moz-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  background: -webkit-linear-gradient(left, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  background: linear-gradient(to right, #ff3232 0%, #ffff30 50%, #95ef81 100%);
  width: 400px;
  height: 20px;
  position: relative;
  margin-bottom: 25px;
  display: flex;
}
.score{
   width: 33.33%;
   height: 100%;
   position: relative;
}

.arrow {
  position: absolute;
  right: calc(100% - 5px);
  top: 100%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow span {
  font-size: 10px;
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="scoreContainer">
   <div class="green score" data-high="600" data-low="400" data-score="475">
        <div class="arrow"></div>
    </div>
    <div class="yelow score" data-high="399" data-low="200" data-score="201">
        <div class="arrow"></div>
    </div>
     <div class="red score" data-high="199" data-low="0" data-score="99">
        <div class="arrow"></div>
    </div>
    
 </div>