模仿LinkedIn“配置文件强度”计

时间：2016-06-02 06:02:22

标签： javascript jquery html css

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

这是图像如何在linkedIn中工作 enter image description here

这是我的代码

Employee

这是我的小提琴http://jsfiddle.net/5aufgL8o/6/

如何根据个人资料等级在右侧添加文字？

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

7 个答案:

答案 0 :(得分：5)

  • 创建location absolute positioned以保留div。

    • text的

  • top将与div元素的top相同。

.fill
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;
}

答案 1 :(得分：4)

首先尝试使用圆形的透明图像。圆圈后的白色方块不应该来。这里的休息是带有示例的代码

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

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: 1;
}

.text {
  position: absolute;
  left: 100%;
  top: -17px;
  z-index: 1;
  border-bottom: 1px solid #000;
  padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill">
    <div class="text">
      sdhfs
    </div>
  </div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>

</div>

答案 2 :(得分：3)

请参阅FIDDLE

这会有帮助吗？只是使用伪元素来实现这一点。

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

fillMeter(82);
.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    
    .fill:before{
      content: 'expert';
      width: 150px;
      height: 1px;
      background: #000;
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      vertical-align: top;
    }
<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>

或者组合两个伪类，

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

fillMeter(82);
.fill {
      position: absolute;
      top: 90px;
      left: 0;
      height: 0px;
      width: 90px;
      background-color: green;
    }
    .mask {
      display: block;
      height: 90px;
      left: 0;
      position: absolute;
      top: 0;
      width: 90px;
      overflow:hidden;
    }
    
    .fill:before{
      content: '';
      width: 150px;
      height: 1px;
      background: #000;
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      vertical-align: top;
    }
    
    .fill:after{
      content: 'Expert';
      display: inline-block;
      position: absolute;
      right: -140px;
      z-index: 999;
      text-align: right;
      top: -20px;
    }
<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>

答案 3 :(得分：2)

现在你已经习惯了这段代码

我创建了一个div .textSection，并为此div定义了一些css，并为js设置了一些代码。

您可以动态更改为文字投掷js 

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
      $(".textSection").css('top', (90-pixels));
      
      if(percent < 25) {
    $(".textSection").text("Beginner");
  } else if(percent >= 25 && percent < 50) {
            $(".textSection").text("Intermediate");
  } else if(percent >= 50 && percent < 75) {
    $(".textSection").text("Expert");
  } else if(percent >= 75) {
    $(".textSection").text("All star");
  }
      
}

fillMeter(40);
.textSection{
  position: absolute;
  margin-top:-20px;
    top: 0;
    left: 81px;
    border-bottom: solid red 2px;
    overflow: hidden;
    z-index: 1;
    padding-left: 21px;
    white-space: nowrap;
}
.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;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;display: inline-block;">
<div class="textSection"> </div>
  <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>

答案 4 :(得分：2)

试试这个：

这将显示消息初学者，中级，专家，全明星动态基于百分比甚至颜色将根据条件改变.fill

演示：http://jsfiddle.net/hanqtjzb/

HTML：

<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">
  <span  class="msg">aaa</span>
  <div class="line">

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

jQuery的：

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

      if(percent < 25) {
        $(".msg").text("Beginner");
      } else if(percent >= 25 && percent < 50) {
                $(".msg").text("Intermediate");
      } else if(percent >= 50 && percent < 75) {
        $(".msg").text("Expert");
      } else if(percent >= 75) {
        $(".msg").text("All star");
      }

}

fillMeter(55);

的CSS：

.line {
    border: 1px solid;
    position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}
.msg {
  position: absolute;
    left: 90px;
    width: 20%;
    text-align:top;
}

.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;
    }

答案 5 :(得分：2)

此FIDDLE效果很好。

可能会更好但我现在没有多少时间，如果可以帮到你，请与我联系。

只需要更好地显示该行，但该想法是先前的响应，使用jS而不是css。

＆＃13;
＆＃13; 
function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".fill").css('height', pixels + "px");
		  $(".text").css('top', (80-pixels) + "px"); 
      	var texto = ""
      if (percent > 90) {
        texto = "All-Star";
      } else if ( percent < 90 & percent > 75) {
        texto = "Expert";
      } else if ( percent < 75 & percent > 25) {
      	texto = "<u>Intermediate</u>";
      } else if (percent < 25) {
      	texto = "Begginer";
      }

      $(".text").html("<u>_____________"+texto+"<u>")

}



fillMeter(70);
＆＃13; 
.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;
    }
    .text {
      position: absolute;
      top: 0;
      left: 90px;
    }
＆＃13; 
<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>
<div class="text" >_____________________ </div>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：0)

我最终优化了代码，以便更好地理解和使用CSS而不是使用图像。

这是代码

function fillMeter(percent) {
      var pixels = (percent/100) * 90;
      $(".fill").css('top', (90-pixels) + "px");
      $(".level").css('top', (77-pixels) + "px");
      $(".fill").css('height', pixels + "px");
      
      
         if (percent <= 0) {
            $(".level").css("top", "67px");
            $(".level").text("Beginner");
        } else if (percent <= 25) {
            $(".fill").css('background', "#FF6D3E");
            $(".level").text("Beginner");
        } else if (percent <= 50) {
            $(".fill").css('background', "#F2C548");
            $(".level").text("Intermediate");
        } else if (percent <= 75) {
            $(".fill").css('background', "#2F9CE1");
            $(".level").text("Expert");
        } else if (percent <= 100) {
            $(".level").text("All Star");
            $(".fill").css('background', "#287EB6");
        } else if (percent <= 99) {
            $(".level").css("top", "0");
        }
      
}

fillMeter(65);
.profile-strength-wrap {
    position: relative;
    margin-top: 40px;
    width: 200px;
    height: 100px;
}

    .profile-strength-wrap .fill {
        position: absolute;
        top: 90px;
        left: 0;
        height: 0px;
        width: 90px;
        overflow: hidden;
    }

    .profile-strength-wrap .mask {
        display: block;
        height: 90px;
        left: 0;
        position: absolute;
        top: 0;
        width: 90px;
        overflow: hidden;
        border-radius: 50%;
        border: 4px solid #CACACA;
        z-index: 120;
    }

    .profile-strength-wrap span.level {
        position: absolute;
        left: 20%;
        top: 1px;
        width: 80%;
        text-align: right;
        border-bottom: 1px solid #888;
        text-transform:capitalize;
    }

.profile-strength h3 {
       font-size: 1.2em;
    text-align: left;
    font-weight: 500;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile-strength">
                             
                            <div class="profile-strength-wrap">
                                <div class="mask">
                                    <div class="fill"></div>
                                </div>
                                <span class="level"></span>
                            </div>
                    <h3>Profile Strength</h3>

                      </div>

相关问题
最新问题