一杯水显示进度 CSS JQuery [关闭]答案

【问题标题】：Glass of water to show progress CSS JQuery [closed]一杯水显示进度 CSS JQuery [关闭]
【发布时间】：2013-03-21 03:36:01
【问题描述】：

我一直在开发一个应用程序，最近开始对其进行一些相当大的更改。基本上，该应用程序使用户能够跟踪他们喝的水并将其应用于他们在注册时设定的目标。

其中一个功能将是他们当前进度的可视化表示，但我无法弄清楚如何按照我想要的方式进行操作。

我想要一杯水，根据当前状态加满。（如果用户有 75% 的目标，则玻璃填充到 75%，等等）。

有什么想法吗？我一遍又一遍地查找它，但没有运气。

因为票数很接近：

问题 -> 如何使用一杯水作为进度条？

现在应该已经很清楚了，但如果不是......请告诉我。

【问题讨论】：

人们投票关闭这个？当然，这是一个可以接受的问题。
有 2 票接近的票说这不是一个真正的问题。
What have you tried?

标签： jquery css progress animated

【解决方案1】：

这是我按照您的描述制作的小提琴。你应该能看到发生了什么！

http://jsfiddle.net/mike_marcacci/XztTN/

基本上，只需在 div.glass 中嵌套一个 div.water，将水定位到玻璃的底部，并通过查询为其高度设置动画！

$(function(){
    $('.water').animate({
        height: '75%'
    }, 1000)
})

【讨论】：

【解决方案2】：

借助filling a glass with water using html5

你可以有这样的东西。

$(function(){
var p = $("#progress").text();//your percentage
var c = 400;//height of glass
var a = (p/100)*c;
$("#glass").hover(function(){

    $("#water").css("height",a+"px");

});

});

css

#container {
background: rgba(0,0,0,0.10);
margin-left: auto;
margin-right: auto;
width: 300px;
border-left: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-top: 1px solid #ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 30px;
padding-top: 5px;
}

#glass {
background: rgba(255,255,255,0.50);
border: 1px solid #bbb;
border-top: 1px solid #eee;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width: 300px;
height: 400px;
position: relative;
}

#water {
background-color: #9cc6ff;
position: absolute;
bottom: 0px;
width: 300px;

-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}

#glass:hover #water {
background-position: top left;
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
transition: all 3s ease-out;
}

检查这个JSFIDDLE

【讨论】：

【解决方案3】：

我做了一些非常相似的事情，将一个半透明的白色 PNG 绝对定位在基本图像的顶部（在你的情况下是玻璃），并随着百分比的增加将其移动得更高。

<div style="z-index: 10; position: relative;"><img src="images/overlay.png" style="position: absolute; top: 75%; left: 0; width: 100%; height: 250px;"></div>
<p style="text-align: center; margin: 0; padding: 0;"><img src="glass.png" width="100" height="250"></p>

您也可以使用半透明玻璃图像和水背景图像来实现，再次根据百分比向上移动水。在这种特殊情况下，这可能会产生更好的效果。

【讨论】：