Question

前段时间我问过this question，但从那以后我才知道这是不是解决这个问题的好方法，所以我重写了我的整个设计：

我目前有一个圆柱体，我将用它来生成一个三维可视化，其中包含了多少液体在一个罐子里。它将从数据库中获得其百分比值。

我目前有以下标记：

＆＃13;

$(document).ready(function () {

    var t = (parseInt($('#number').val()));

    $('.containts').css("height", t + "%");
    $('.tank').addClass("makeSmall");
});

 $('#this').on("click",function(){
       var y = (parseInt($('#number').val()));
        $('.containts').css("height", y + "%");
        $('.containts').text(y+"%");
    });

＆＃13;

.tank {
    height:40vw;
    width:40vw;
    position:relative;
    z-index:2;
    transition:all 1s;
}
.makeSmall {
    height:40vw;
    width:40vw;
}
.tank:before {
    height:100%;
    width:100%;
    border-radius:100%/30px;
    background:rgba(0, 0, 0, 0.2);
    content:"";
    position:absolute;
}
.tank:after {
    content:"";
    position:absolute;
    border-radius:100%/30px;
    height:30px;
    top:0;
    left:0;
    width:100%;
    background:rgba(0, 0, 0, 0.4);
}
.containts {
    position:absolute;
    background:rgba(255, 0, 0, 0.8);
    bottom:0;
    height:1%;
    width:100%;
    text-align:center;
    border-radius:100%/30px;
    transition:all 1.5s;
        color:white;
}
.containts:after {
    content:"";
    position:absolute;
    background:rgba(0, 0, 0, 0.2);
    top:0;
    left:0;
    height:30px;
    width:100%;
    border-radius:100%/30px;
    border-bottom:1px solid black;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
    
    <div class="containts">50%</div>
</div>
<br/>
<br/>
<br/>
<br/>
Please enter a valuse between 0 and 100:
<input type="number" value="50" id="number" />
<button id="this">GO</button>

＆＃13;

然而，当我使用大约小于10（即10％）的值时，水箱失去其完整性并且值无法正确显示（即液体出现在其容器外面）。

在较小值的较小屏幕上看起来更容易看到。

有人会建议如何更改我当前的标记，以阻止底部从容器底部掉落吗？

任何进一步的澄清我都乐意进一步解释。

fiddle for thought

Answer 1

主要问题是您使用多个单位（px, %, vw）作为元素的高度，这使得计算变得复杂。我将elipses值的高度更改为4vw，以便它们响应视口宽度（如坦克的高度）并使计算更容易。

然后你需要计算.contains的高度。它的最小高度为4vw = 10% 40vw}，因此从36vw到4vw应该40vw。作为36 = 40* 0.9你可以写：

var t = (parseInt($('#number').val())),
    h = t*0.9 + 10 ;
    $('.containts').css("height", h + "%");

<强> DEMO

＆＃13;

$(document).ready(function() {
  var t = (parseInt($('#number').val())),
    h1 = t * 0.9 + 10;
  $('.containts').css("height", h1 + "%");
  $('.tank').addClass("makeSmall");
});

$('#this').on("click", function() {
  var y = (parseInt($('#number').val())),
    h2 = y * 0.9 + 10;
  $('.containts').css("height", h2 + "%");
  $('.containts').text(y + "%");

});

＆＃13;

.tank {
  height: 40vw;
  width: 40vw;
  position: relative;
  z-index: 2;
  transition: all 1s;
}
.makeSmall {
  height: 40vw;
  width: 40vw;
}
.tank:before {
  height: 100%;
  width: 100%;
  border-radius: 100%/30px;
  background: rgba(0, 0, 0, 0.2);
  content: "";
  position: absolute;
}
.tank:after {
  content: "";
  position: absolute;
  border-radius: 100%/30px;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.containts {
  position: absolute;
  background: rgba(255, 0, 0, 0.8);
  bottom: 0;
  height: 0;
  width: 100%;
  text-align: center;
  border-radius: 100%/30px;
  transition: all 1.5s;
  color: white;
}
.containts:after {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  border-radius: 100%/30px;
  border-bottom: 1px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tank">
  <div class="containts">0%</div>
</div>
<br/>
<br/>
<br/>
<br/>Please enter a valuse between 0 and 100:
<input type="number" value="0" id="number" />
<button id="this">GO</button>

＆＃13;

3D圆柱体在小值上失去完整性

1 个答案: