大佬教程收集整理的这篇文章主要介绍了jquery – 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.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%)的值时,罐失去其完整性并且值无法正确显示(即液体出现在其容器外部).
有人会建议如何改变我目前的标记,以阻止“底部从容器底部掉落”?
任何进一步的澄清我都乐意进一步解释.
然后你需要计算.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 + "%");
$(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>
以上是大佬教程为你收集整理的jquery – 3D圆柱体在小值上失去完整性全部内容,希望文章能够帮你解决jquery – 3D圆柱体在小值上失去完整性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。