0

私はアプリに取り組んでいて、最近、かなり大きな変更を加え始めました。基本的に、アプリを使用すると、ユーザーは自分が飲んだ水を追跡し、それを登録時に設定した目標に適用できます.

機能の 1 つは、現在の進行状況を視覚的に表現することですが、それを希望どおりに行う方法がわかりません。

現在の状況に基づいて満たされるコップ一杯の水が欲しい. (ユーザーが目標の 75% を達成した場合、グラスは 75% まで満たされます)。

何か案は？私は何度も何度もそれを調べましたが、運がありません。

閉票のため:

質問 -> コップ一杯の水をプログレス バーとして使用するにはどうすればよいですか?

これで十分に明確になるはずですが、そうでない場合は.. お知らせください。

4

3 に答える 3

6

これは、あなたが説明したことを正確に行うために作成したフィドルです。あなたは何が起こっているかを見ることができるはずです！

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

基本的には、div.glass 内に div.water をネストし、水をグラスの底に配置し、その高さをクエリでアニメーション化するだけです!

$(function(){
    $('.water').animate({
        height: '75%'
    }, 1000)
})
于 2013-03-21T03:56:41.377 に答える
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をチェックしてください

于 2013-03-21T04:02:17.157 に答える
0

半透明の白い 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-21T03:58:56.780 に答える