jquery – 使用html和css创建动态Tank level / meter

我目前在项目中创建“储罐计量系统”时遇到了问题.我正在使用MVC并使用以下标记,我已经实现了这个：

通过使用：

#container {
    position:absolute;
    margin:0;
    margin-top:-50px;    
    width:100%;
    padding:0;    
    -moz-perspective: 1000px; /*required to make cylinder shape*/
    -webkit-perspective: 1000px;
}
#frame {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    margin-left:5%;
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%,60px,175px);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%,175px); 

}
.strip {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}
.strip div {
    position: fixed;
    background-repeat:repeat;
    border-width: thin 10px;
    color:#ececec;
    vertical-align:central;
    height:130px; /*height and width of tank display*/
    width:12%;
    background-color:rgba(128,128,0.99);
    -webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;

-webkit-Box-shadow: inset 0px -35px 20px -37px rgba(0,0.96);
-moz-Box-shadow: inset 0px -35px 20px -37px rgba(0,0.96);
Box-shadow: inset 0px -35px 20px -37px rgba(0,0.96);
}
.strip div:before {
    content:"";
    position: absolute;
    z-index: -1;
    /*Make this lower so any text appears in front*/

    top: 0;
    right: 0;
    bottom: 50%; /*used for tank level setting*/
    left: 0;
    background: rgba(56,56,0.8);



}
.strip .a {


     border-top:1px solid black;
    -moz-transform: rotateY(0deg) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px)
}
.strip .b {
     border-top:1px solid black;
    -moz-transform: rotateY(15deg) translateZ(124px);
    -webkit-transform: rotateY(15deg) translateZ(124px)
}
.strip .c {
     border-top:1px solid black;
    -moz-transform: rotateY(30deg) translateZ(124px);
    -webkit-transform: rotateY(30deg) translateZ(124px);
}

 .strip .c {
    background: rgb(0,0) !important; /* Old browsers */
background: -moz-linear-gradient(top,rgba(0,1) 0%,rgba(128,1) 1%,1) 9%,1) 10%,1) 11%,1) 19%,1) 20%,1) 21%,1) 29%,1) 30%,1) 31%,1) 39%,1) 40%,1) 41%,1) 49%,1) 50%,1) 51%,1) 59%,1) 60%,1) 61%,1) 69%,1) 70%,1) 71%,1) 79%,1) 80%,1) 81%,1) 89%,1) 90%,1) 91%,1) 99%,1) 100%)!important; /* FF3.6+ */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,1)),color-stop(1%,color-stop(9%,color-stop(10%,color-stop(11%,color-stop(19%,color-stop(20%,color-stop(21%,color-stop(29%,color-stop(30%,color-stop(31%,color-stop(39%,color-stop(40%,color-stop(41%,color-stop(49%,color-stop(50%,color-stop(51%,color-stop(59%,color-stop(60%,color-stop(61%,color-stop(69%,color-stop(70%,color-stop(71%,color-stop(79%,color-stop(80%,color-stop(81%,color-stop(89%,color-stop(90%,color-stop(91%,color-stop(99%,color-stop(100%,1)))!important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,1) 100%)!important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,1) 100%)!important; /* Opera 11.10+ */
background: -ms-linear-gradient(top,1) 100%)!important; /* IE10+ */
background: linear-gradient(to bottom,1) 100%)!important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000',endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

.strip .d {
    border-top:1px solid black;
    -moz-transform: rotateY(45deg) translateZ(124px);
    -webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
    border-top:1px solid black;
    -moz-transform: rotateY(60deg) translateZ(124px);
    -webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
    border-top:1px solid black;

    -moz-transform: rotateY(75deg) translateZ(124px);
    -webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
    border-top:1px solid black;
    -moz-transform: rotateY(90deg) translateZ(124px);
    -webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
    border-top:1px solid black;
    -moz-transform: rotateY(105deg) translateZ(124px);
    -webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
    border-top:1px solid black;
    -moz-transform: rotateY(120deg) translateZ(124px);
    -webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
    border-top:1px solid black;
    -moz-transform: rotateY(135deg) translateZ(124px);
    -webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
    border-top:1px solid black;
    -moz-transform: rotateY(150deg) translateZ(124px);
    -webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
    border-top:1px solid black;
    -moz-transform: rotateY(165deg) translateZ(124px);
    -webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
    border-top:1px solid black;
    -moz-transform: rotateY(180deg) translateZ(124px);
    -webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
    border-top:1px solid black;
    -moz-transform: rotateY(195deg) translateZ(124px);
    -webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
    border-top:1px solid black;
    -moz-transform: rotateY(210deg) translateZ(124px);
    -webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
    border-top:1px solid black;
    -moz-transform: rotateY(225deg) translateZ(124px);
    -webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
    border-top:1px solid black;
    -moz-transform: rotateY(240deg) translateZ(124px);
    -webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
    border-top:1px solid black;
    -moz-transform: rotateY(255deg) translateZ(124px);
    -webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
    border-top:1px solid black;
    -moz-transform: rotateY(270deg) translateZ(124px);
    -webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
    border-top:1px solid black;
    -moz-transform: rotateY(285deg) translateZ(124px);
    -webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
    border-top:1px solid black;
    -moz-transform: rotateY(300deg) translateZ(124px);
    -webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
    border-top:1px solid black;
    -moz-transform: rotateY(315deg) translateZ(124px);
    -webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
    border-top:1px solid black;
    -moz-transform: rotateY(330deg) translateZ(124px);
    -webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
    border-top:1px solid black;
    -moz-transform: rotateY(345deg) translateZ(124px);
    -webkit-transform: rotateY(345deg) translateZ(124px);

}

<div class="tankWidget">
        <div class="banner">Tank 1: Kero</div>

        <div id="container">
            <div id="frame">
                <div class="strip">
                    <div id="tank1FrameA"class="a">50%</div>
                    <div class="b"></div>
                    <div class="c"></div>
                    <div class="d"></div>
                    <div class="e"></div>
                    <div class="f"></div>
                    <div class="g"></div>
                    <div class="h"></div>
                    <div class="i"></div>
                    <div class="j"></div>
                    <div class="k"></div>
                    <div class="l"></div>
                    <div class="m"></div>
                    <div class="n"></div>
                    <div class="o"></div>
                    <div class="p"></div>
                    <div class="q"></div>
                    <div class="r"></div>
                    <div class="s"></div>
                    <div class="t"></div>
                    <div class="u"></div>
                    <div class="v"></div>
                    <div class="w"></div>
                    <div class="x"></div>
                </div>
            </div>
        </div>




        <div class="widget-footer">
            <table id="specTab1">
                <tr><th>Volume</th><th>Capacity</th><th>Ullage (AL)</th></tr>
                <tr id="tank1"><td id="tank1Vol">50L</td><td>100L</td><td>1.24</td></tr>
            </table>
            <br />
            <div class="lowerWidget-footer">
                <br />
                Details
            </div>
        </div>
    </div>

但是,我现在期待它变得动态. (即浅灰色等级根据’.a’条带内的值而变化(在这种情况下为50％).

我用的是：

var test = $('#tank1FrameA').text(); //gets value of first tank
        test = parseInt(test);

得到50提取.

但是,由于我无法定位：beforepseudo元素来编辑’高度/等级’,我还能如何实现这种平衡/动态能力？

一般来说;

+-------------+
|    50%      | <-- value to use
|             |
+-------------+ <-- this level should change
|             |
|             |
+-------------+

为25％：

+-------------+
|    25%      | <-- value to use
|             |
|             |
+-------------+ <-- this level should change
|             |
+-------------+

等等

有关这种圆柱形状如何完成的任何建议？

Here是一个可运行/可编辑的jsfiddle.

最初创建时

坦克,我正在寻找编辑：

.strip div:before {

为了达到这个目的,我们的底层属性.

但是,我最近发现伪元素不是DOM的一部分,因此JQuery无法访问(尽管它可能很强大).

var amount = $('.tk').attr('data-amount'),height = amount * 80/100 + 20;

$('.lq').css({height : height + '%'});

.tk{ /*Liquid Section*/
    position:relative;
    width:40%; 
    height:130px;
    padding-top:50px;
    margin: 0 auto;
    background:rgba(56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;

}
.tk:after,.lq{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:20%;
    z-index:-1;
}
.lq{
    background:rgba(128,0.99);
    height:80%;
    top:-2px;
    border-radius:100%/40px;
    border-bottom:3px solid #000;
}
.tk:after{
    height:20%;
    border:1px solid #000;
    border-radius:100%; /*makes circle at toP*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tk" data-amount="40">
    40%
    <div class="lq"></div>
</div>