草庐IT

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

coder 2023-08-08 原文

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

我目前有一个圆柱体，我将使用它来生成“ 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%)的值时，储 jar 失去了完整性并且该值无法正确显示(即液体出现在其容器“外部”)。

这在具有较小值的较小屏幕上特别容易看到。

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

如果有任何进一步的说明，我很乐意进一步解释。

fiddle for thought

最佳答案

主要问题是您对元素的高度使用了多个单位(px, %, vw)，这使得计算变得复杂。我将椭圆值的高度更改为 4vw，以便它们响应视口(viewport)宽度(如水箱的高度)并使计算更容易。

然后你需要计算.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 + "%");

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

关于jquery - 3D 圆柱体在小值上失去完整性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28277948/

圆柱体jquerycode34sectionhtmlcsscss-shapes

有关jquery - 3D 圆柱体在小值上失去完整性的更多相关文章

  1. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  2. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  3. FOHEART H1数据手套驱动Optitrack光学动捕双手运动(Unity3D) - 2

    本教程将在Unity3D中混合Optitrack与数据手套的数据流，在人体运动的基础上，添加双手手指部分的运动。双手手背的角度仍由Optitrack提供，数据手套提供双手手指的角度。 01  客户端软件分别安装MotiveBody与MotionVenus并校准人体与数据手套。MotiveBodyMotionVenus数据手套使用、校准流程参照：https://gitee.com/foheart_1/foheart-h1-data-summary.git02  数据转发打开MotiveBody软件的Streaming，开始向Unity3D广播数据；MotionVenus中设置->选项选择Unit

  4. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  5. [Vuforia]二.3D物体识别 - 2

    之前说过10之后的版本没有3dScan了，所以还是9.8的版本或者之前更早的版本。 3d物体扫描需要先下载扫描的APK进行扫面。首先要在手机上装一个扫描程序，扫描现实中的三维物体，然后上传高通官网，在下载成UnityPackage类型让Unity能够使用这个扫描程序可以从高通官网上进行下载，是一个安卓程序。点到Tools往下滑，找到VuforiaObjectScanner下载后解压数据线连接手机，将apk文件拷入手机安装然后刚才解压文件中的Media文件夹打开，两个PDF图打印第一张A4-ObjectScanningTarget.pdf，主要是用来辅助扫描的。好了，接下来就是扫描三维物体。将瓶

  6. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  7. python - Ruby 或 Python 的 3d 游戏引擎？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭9年前。Improvethisquestion是否有适用于这些的3d游戏引擎？

  8. 【自动驾驶环境感知项目】——基于Paddle3D的点云障碍物检测 - 2

    文章目录1.自动驾驶实战：基于Paddle3D的点云障碍物检测1.1环境信息1.2准备点云数据1.3安装Paddle3D1.4模型训练1.5模型评估1.6模型导出1.7模型部署效果附录show_lidar_pred_on_image.py1.自动驾驶实战：基于Paddle3D的点云障碍物检测项目地址——自动驾驶实战：基于Paddle3D的点云障碍物检测课程地址——自动驾驶感知系统揭秘1.1环境信息硬件信息CPU:2核AI加速卡:v100总显存:16GB总内存:16GB总硬盘:100GB环境配置Python:3.7.4框架信息框架版本:PaddlePaddle2.4.0（项目默认框架版本为2.3

  9. jquery - 如何在 rails 3.1 上安装 jQuery - 2

    我以为它已经安装了，但在我的gemfile中有gem"jquery-rails"但是在我的asset/javascripts文件夹中accounts.js.coffeeapplication.js都被注释掉了这是我的虚拟railsapplication但是在源代码中没有jQuery并且删除链接不起作用......任何想法都丢失了 最佳答案 看看thisRailscast.您可能需要检查application.js文件并确保它包含以下语句。//=requirejquery//=requirejquery_ujs

  10. jquery - Rails 如何创建 Jquery flash 消息而不是默认的 Rails 消息 - 2

    我想在页面顶部创建自定义Jquery消息而不是标准RailsFlash消息。我想在我的投票底部附近创建一条即时消息。我的Controller:defvote_up@post=Post.find(params[:id])current_user.up_vote(@post)flash[:message]='Thanksforvoting!'redirect_to(root_path,:notice=>'Takforditindlæg,deternuonline!')rescueMakeVoteable::Exceptions::AlreadyVotedErrorflash[:error]

随机推荐