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

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

我目前有一个圆柱体,我将用它来生成“罐子里有多少液体”的三维可视化.它将从数据库中获得其百分比值.

我目前有以下标记：

$(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+"%");
    });

.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.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.4);
}
.containts {
    position:absolute;
    background:rgba(255,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.2);
    top:0;
    left:0;
    height:30px;
    width:100%;
    border-radius:100%/30px;
    border-bottom:1px solid black;

}

<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>

然而,当我使用大致小于10(即10％)的值时,罐失去其完整性并且值无法正确显示(即液体出现在其容器外部).

这在具有较小值的较小屏幕上更容易看到.

有人会建议如何改变我目前的标记,以阻止“底部从容器底部掉落”？

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

fiddle for thought

解决方法

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

然后你需要计算.contains的高度.它的最小高度为4vw(= 40vw的10％),所以它应该从4vw到40vw跨越36vw.如36 = 40 * 0.9你可以写：

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

DEMO

$(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 + "%");

});

.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.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.4);
}
.containts {
  position: absolute;
  background: rgba(255,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.2);
  top: 0;
  left: 0;
  height: 30px;
  width: 100%;
  border-radius: 100%/30px;
  border-bottom: 1px solid black;
}

<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>

原文地址：https://www.jb51.cc/jquery/241383.html