3D 圆柱体在小值上失去完整性
3D cylinder loses integrity on small values
前一段时间我问过 this question,但从那时起我就知道这不是解决这个问题的好方法,所以我重写了我的整个设计:
我目前有一个圆柱体,我将使用它来生成 'how much liquid is in a jar' 的 3D 可视化效果。它将从数据库中获取百分比值。
我目前有以下标记:
$(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, 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;
}
<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%)的值时,水箱失去了完整性并且该值无法正确显示(即液体出现 'outside' 其容器)。
这在具有较小值的较小屏幕上尤其容易看到。
有人可以建议如何更改我当前的标记以停止 'bottom dropping off the bottom of the container' 吗?
如果有任何进一步的说明,我很乐意进一步解释。
主要问题是您对元素的高度使用了多个单位 (px, %, vw
),这使得计算变得复杂。我将椭圆值的高度更改为 4vw
,以便它们响应视口宽度(如水箱的高度)并使计算更容易。
然后你需要计算.contains
的高度。它的最小高度为 4vw
(= 10%
of 40vw
),因此它应该跨越 36vw
从 4vw
到 40vw
。作为 36 = 40* 0.9
你可以写成:
var t = (parseInt($('#number').val())),
h = t*0.9 + 10 ;
$('.containts').css("height", h + "%");
$(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, 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;
}
<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>
前一段时间我问过 this question,但从那时起我就知道这不是解决这个问题的好方法,所以我重写了我的整个设计:
我目前有一个圆柱体,我将使用它来生成 'how much liquid is in a jar' 的 3D 可视化效果。它将从数据库中获取百分比值。
我目前有以下标记:
$(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, 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;
}
<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%)的值时,水箱失去了完整性并且该值无法正确显示(即液体出现 'outside' 其容器)。
这在具有较小值的较小屏幕上尤其容易看到。
有人可以建议如何更改我当前的标记以停止 'bottom dropping off the bottom of the container' 吗?
如果有任何进一步的说明,我很乐意进一步解释。
主要问题是您对元素的高度使用了多个单位 (px, %, vw
),这使得计算变得复杂。我将椭圆值的高度更改为 4vw
,以便它们响应视口宽度(如水箱的高度)并使计算更容易。
然后你需要计算.contains
的高度。它的最小高度为 4vw
(= 10%
of 40vw
),因此它应该跨越 36vw
从 4vw
到 40vw
。作为 36 = 40* 0.9
你可以写成:
var t = (parseInt($('#number').val())),
h = t*0.9 + 10 ;
$('.containts').css("height", h + "%");
$(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, 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;
}
<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>