使用html和css创建动态Tank级别/度量 [英] Creating a dynamic Tank level/meter using html and css
问题描述
我目前在我的专案中建立「储罐计量系统」时遇到问题。我使用MVC和使用下面的标记,我已经实现了这一点:
I am currently having problems creating a 'tank gauging system' within my project. I am using MVC and the by using the following markup, I have achieved this:
:
#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>
但是,我现在正在寻找动态。 (即浅灰色级别根据'.a'条中的值(在这种情况下为50%)而变化。
However, I am looking to now make it dynamic. (i.e. the light grey level changes depending on the value within the '.a' strip (in this case 50%).
我使用的是:
var test = $('#tank1FrameA').text(); //gets value of first tank
test = parseInt(test);
以提取 50
但是,由于我无法定位:before
伪元素来编辑'height / level'
However, since I am unable to target the :before
pseudo element to edit the 'height/level', how else could I achieve this leveling/dynamic ability?
一般来说,
+-------------+
| 50% | <-- value to use
| |
+-------------+ <-- this level should change
| |
| |
+-------------+
25%:
+-------------+
| 25% | <-- value to use
| |
| |
+-------------+ <-- this level should change
| |
+-------------+
等。
有关如何使用这种圆柱体形状可以做任何建议吗?
Any suggestions as to how thic can be done with this cylinder shape?
这里是一个可运行/可编辑的jsfiddle。
Here is a runnable/editable jsfiddle.
坦克时,我正在编辑:
.strip div:before {
属性为了实现这一点。
然而,我最近发现伪元素不是DOM的一部分,因此是不可访问的JQuery(强大,因为它可能
However, i have recently discovered that pseudo elements aren't part of the DOM, and so are inaccessible to JQuery (powerful as it may be).
推荐答案
如果你只需要填充坦克,你可以使用一个更简单的结构, HTML元素,border-radius和伪元素。
Then you can use JS to change the height of the green area according to the value entered in the custom data attribute data-amount
of the .tk
div :
然后,您可以使用JS根据在自定义数据属性 data-amount $中输入的值更改绿色区域的高度c $ c>
.tk
div:
DEMO (change the value of the custom data attribute data-amount
in the .tk
div to change the height of the liquid).
DEMO (更改自定义数据属性的值 data-amount
.tk
div以更改液体的高度)。
这篇关于使用html和css创建动态Tank级别/度量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!