Tworzenie dynamicznego poziomu/miernika poziomu w zbiorniku za pomocą html i css

Question

Obecnie mam problemy z tworzeniem "systemu pomiarowego zbiornika" w ramach mojego projektu. Używam MVC i przy użyciu następującego znaczników, udało mi się osiągnąć to:

za pomocą:

#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%, 60px, 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,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,0,0.96); 
-moz-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96); 
box-shadow: inset 0px -35px 20px -37px rgba(0,0,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,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,0) !important; /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(128,128,128,1) 1%, rgba(128,128,128,1) 9%, rgba(0,0,0,1) 10%, rgba(128,128,128,1) 11%, rgba(128,128,128,1) 19%, rgba(0,0,0,1) 20%, rgba(128,128,128,1) 21%, rgba(128,128,128,1) 29%, rgba(0,0,0,1) 30%, rgba(128,128,128,1) 31%, rgba(128,128,128,1) 39%, rgba(0,0,0,1) 40%, rgba(128,128,128,1) 41%, rgba(128,128,128,1) 49%, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 51%, rgba(128,128,128,1) 59%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 60%, rgba(128,128,128,1) 61%, rgba(128,128,128,1) 69%, rgba(0,0,0,1) 70%, rgba(128,128,128,1) 71%, rgba(128,128,128,1) 79%, rgba(0,0,0,1) 80%, rgba(128,128,128,1) 81%, rgba(128,128,128,1) 89%, rgba(0,0,0,1) 90%, rgba(128,128,128,1) 91%, rgba(128,128,128,1) 99%, rgba(0,0,0,1) 100%)!important; /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(128,128,128,1)), color-stop(9%,rgba(128,128,128,1)), color-stop(10%,rgba(0,0,0,1)), color-stop(11%,rgba(128,128,128,1)), color-stop(19%,rgba(128,128,128,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(128,128,128,1)), color-stop(29%,rgba(128,128,128,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(128,128,128,1)), color-stop(39%,rgba(128,128,128,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(128,128,128,1)), color-stop(49%,rgba(128,128,128,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(128,128,128,1)), color-stop(59%,rgba(128,128,128,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(128,128,128,1)), color-stop(69%,rgba(128,128,128,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(71%,rgba(128,128,128,1)), color-stop(79%,rgba(128,128,128,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(128,128,128,1)), color-stop(89%,rgba(128,128,128,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(91%,rgba(128,128,128,1)), color-stop(99%,rgba(128,128,128,1)), color-stop(100%,rgba(0,0,0,1)))!important; /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* IE10+ */ 
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,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> 

jednak szukam teraz zrobić to dynamiczna. . (Np lekkich zmian poziomów szarości w zależności od wartości w zdrapanie '.A' (w tym przypadku, 50%)

ja z:

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

uzyskać 50 ekstrahowano

.

Jednakże, ponieważ nie jestem w stanie kierować element :before pseudo do edycji „wysokość/poziom”, jak inaczej mógłbym osiągnąć ten poziomowania/możliwość dynamicznego

W ogóle;?

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

do 25%:

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

itp itd

Wszelkie sugestie, w jaki sposób można thic zrobić z tym kształcie cylindra?

Here to działające/edytowalne jsfiddle.

---

Kiedy pierwotnie tworzenia

zbiornika, szukałem aby edytować: dolny atrybut

.strip div:before { 

„s, w celu osiągnięcia tego celu.

Jednak ostatnio odkryłem, że pseudoelementy nie są częścią DOM, a więc są niedostępne dla JQuery (tak potężne, jak być może).

Answer 1

Jeśli wystarczy wypełnić zbiornik, można użyć znacznie prostszej struktury do zbudowania zbiornika z dwoma elementami HTML, promieniem brzegu i pseudoelementem.

Następnie można użyć JS zmienić wysokość zieleń według wartości wprowadzonej w danych niestandardowych atrybutów data-amount z .tk Gr:

DEMO (zmienić wartość atrybut niestandardowy dane data-amount w .tk div, aby zmienić wysokość cieczy).

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,56,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,128,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>