Jquery 三维圆柱体在较小的值上失去完整性

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

---

我现在有一个圆筒，我将用它来生成“罐子里有多少液体”的3D可视化。它将从数据库中获取其百分比值

我目前有以下标记：

$（文档）.ready（函数（）{
var t=（parseInt（$（'#number'）.val（））；
$（'.containts'）.css（“高度”，t+“%”）；
$（'.tank'）.addClass（“makeSmall”）；
});
$（'#this'）。在（“单击”，函数（）上）{
变量y=（parseInt（$（'#number'）.val（））；
$（'.containts'）.css（“高度”，y+“%”）；
$（'.containts'）。文本（y+“%”）；
});
.tank{
高度：40vw；
宽度：40vw；
位置：相对位置；
z指数：2；
过渡：所有1；
}
.变小{
高度：40vw；
宽度：40vw；
}
.坦克：之前{
身高：100%；
宽度：100%；
边界半径：100%/30px；
背景：rgba（0,0,0,0.2）；
内容：“；
位置：绝对位置；
}
.坦克：之后{
内容：“；
位置：绝对位置；
边界半径：100%/30px；
高度：30px；
排名：0；
左：0；
宽度：100%；
背景：rgba（0,0,0,0.4）；
}
.集装箱{
位置：绝对位置；
背景：rgba（255,0,0,0.8）；
底部：0；
身高：1%；
宽度：100%；
文本对齐：居中；
边界半径：100%/30px；
过渡：全部1.5s；
颜色：白色；
}
.容器：之后{
内容：“；
位置：绝对位置；
背景：rgba（0,0,0,0.2）；
排名：0；
左：0；
高度：30px；
宽度：100%；
边界半径：100%/30px；
边框底部：1px纯黑；
}

50%








请输入介于0和100之间的值：
GO
主要问题是，您使用多个单位（
px，%，vw
）计算元素的高度，这使得计算变得复杂。我将省略号值的高度更改为
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 + "%");



$（文档）.ready（函数（）{
var t=（parseInt（$（'#number'）.val（）），
h1=t*0.9+10；
$（'.containts'）.css（“高度”，h1+“%”）；
$（'.tank'）.addClass（“makeSmall”）；
});
$（'#this'）。在（“单击”，函数（）上）{
变量y=（parseInt（$（'#number'）.val（）），
h2=y*0.9+10；
$（'.containts'）.css（“高度”，h2+“%”）；
$（'.containts'）。文本（y+“%”）；
});
.tank{
高度：40vw；
宽度：40vw；
位置：相对位置；
z指数：2；
过渡：所有1；
}
.变小{
高度：40vw；
宽度：40vw；
}
.坦克：之前{
身高：100%；
宽度：100%；
边界半径：100%/30px；
背景：rgba（0,0,0,0.2）；
内容：“；
位置：绝对位置；
}
.坦克：之后{
内容：“；
位置：绝对位置；
边界半径：100%/30px；
高度：30px；
排名：0；
左：0；
宽度：100%；
背景：rgba（0,0,0,0.4）；
}
.集装箱{
位置：绝对位置；
背景：rgba（255,0,0,0.8）；
底部：0；
身高：0；
宽度：100%；
文本对齐：居中；
边界半径：100%/30px；
过渡：全部1.5s；
颜色：白色；
}
.容器：之后{
内容：“；
位置：绝对位置；
背景：rgba（0,0,0,0.2）；
排名：0；
左：0；
高度：30px；
宽度：100%；
边界半径：100%/30px；
边框底部：1px纯黑；
}

0%







请输入一个介于0和100之间的值：
转到