jquery - 一杯水显示进度 CSS JQuery

Question

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

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

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

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

由于票数接近：

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

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

Answer 1

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

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

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

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

Answer 2

在这个使用html5装满水的玻璃杯的帮助下

你可以有这样的东西。

js

$(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

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

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