Стакан воды, чтобы показать прогресс CSS JQuery

Question

Я работал над приложением и недавно начал вносить в него довольно большие изменения. По сути, приложение позволяет пользователю отслеживать воду, которую они пьют, и применять ее к цели, которую они ставят при регистрации.

Одной из особенностей будет визуальный повтор их текущего прогресса, но я не могу понять, как сделать это так, как я хочу.

Я хочу стакан воды, который заполняется в зависимости от текущего состояния. (стекло заполняется до 75%, если у пользователя 75% цели и т. д.).

Есть идеи? Я снова и снова перебирал, но не повезло.

ПОТОМУ ЧТО ЗАКРЫТЬ ГОЛОСА

Вопрос -> Как бы я использовал стакан воды в качестве индикатора выполнения?

Это должно быть достаточно ясно сейчас, но если нет.. просто дайте мне знать.

Answer 1

Вот скрипка, которую я сделал, делая именно то, что вы описываете. Вы должны быть в состоянии увидеть, что происходит!

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

По сути, просто вложите div.water в div.glass, поместите воду на дно стакана и анимируйте ее высоту с помощью запроса!

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

Вы также можете сделать это с полупрозрачным стеклянным изображением и фоновым изображением воды, снова увеличивая воду в зависимости от процента. Это может привести к лучшему эффекту в этом конкретном случае.