一杯水來展示進步CSS JQuery

我一直在研究一個應用程序，最近開始對它做一些非常大的改動。基本上，該應用程序使用戶能夠跟蹤他們飲用的水，並將其應用於他們在註冊時設定的目標。一杯水來展示進步CSS JQuery

其中一個功能將是他們當前進度的視覺代表，但我無法弄清楚如何以我想要的方式進行操作。

我想要一杯水，根據當前狀態填滿。（如果使用者有75％的目標等，玻璃填充至75％）。

任何想法？我一遍又一遍地看了一遍，但沒有運氣。

BECAUSE CLOSE票數：

的問題 - >我怎麼會用一杯水作爲一個進度條？

現在應該清楚了，但如果沒有，請讓我知道。

來源

2013-03-21 Zac Brown

人民投票決定關閉這個？當然這是一個可以接受的問題。 – 2013-03-21 03:52:20

有兩個密切的選票說這不是一個真正的問題。 – 2013-03-21 03:54:12

[你有什麼嘗試？]（http://whathaveyoutried.com） – 2013-03-21 03:59:57

這裏有一個小提琴，我做了完全你所描述的。你應該能夠看到發生了什麼！

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

基本上，只要窩內div.glass一個div.water，水放置在玻璃底部，並與查詢動畫的高度！

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

來源

2013-03-21 03:56:41

我通過在基本圖像的頂部（在你的情況下，玻璃）絕對定位半透明白色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>

你也可以做一個半透明的玻璃圖像和水的背景圖像，再次基於百分比移動水。這可能會在這個特殊情況下產生更好的效果。

來源

2013-03-21 03:58:56

與此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

來源

2013-03-21 04:02:17 Nikhar

一杯水來展示進步CSS JQuery

回答

相關問題