javascript - 模拟 LinkedIn "profile strength"仪表

Question

我需要帮助来实现类似于 linkedIn 的配置文件强度。

这是它在 linkedIn 中如何工作的图片

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

.fill {
    position: absolute;
    top: 90px;
    left: 0;
    height: 0px;
    width: 90px;
    background-color: green;
    overflow:hidden;
}
.mask {
    display: block;
    height: 90px;
    left: 0;
    position: absolute;
    top: 0;
    width: 90px;
    overflow:hidden;
}

function fillMeter(percent) {
    var pixels = (percent/100) * 90;
    $(".fill").css('top', (90-pixels) + "px");
    $(".fill").css('height', pixels + "px");
}

fillMeter(82);

这是我的 fiddle http://jsfiddle.net/5aufgL8o/6/

如何根据配置文件级别在右侧添加文本？​​

更新 :我在github中创建了一个存储库，如果有人想让它更好地供人们使用，那就更好了。这是 repo 链接 https://github.com/shahilmhd/linkedinprofilestrength

Answer 1

• 创建绝对定位 div 来保存文本。

div 的

• top 将与 .fill 元素的 top 相同。

function fillMeter(percent) {
  var pixels = (percent / 100) * 90;
  $(".fill").css('top', (90 - pixels) + "px");
  $(".fill").css('height', pixels + "px");
  $(".line").css('top', (90 - pixels) + "px");
  $(".line div").text('All-star'); //This text could be dynamic
}

fillMeter(82);

.fill {
  position: absolute;
  top: 90px;
  left: 0;
  height: 0px;
  width: 90px;
  background-color: green;
  overflow: hidden;
}
.mask {
  display: block;
  height: 90px;
  left: 0;
  position: absolute;
  top: 0;
  width: 90px;
  overflow: hidden;
  z-index: 99;
}
.line {
  position: absolute;
  width: 200px;
  left: 90px;
  height: 2px;
  background-color: black;
  z-index: 98;
}
.line div {
  color: black;
  position: relative;
  top: -20px;
  text-align: end;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png">
  <div class='line'>
    <div>

    </div>
  </div>
</div>