Jquery 投票结果栏的好技巧是什么?
我正在创建一些投票软件,目前正在研究做投票结果图形栏的技术。没什么复杂的,只是一些简单的结果条 我想知道是否有任何经过验证的最好的方法。我想到的最好的方法是为每个条使用一个div容器,然后使用一个图像或其他元素,在其中设置大小(宽度)等于选项结果百分比(内联css) 这方面的例子 strong文本Jquery 投票结果栏的好技巧是什么?,jquery,asp.net,html,css,Jquery,Asp.net,Html,Css,我正在创建一些投票软件,目前正在研究做投票结果图形栏的技术。没什么复杂的,只是一些简单的结果条 我想知道是否有任何经过验证的最好的方法。我想到的最好的方法是为每个条使用一个div容器,然后使用一个图像或其他元素,在其中设置大小(宽度)等于选项结果百分比(内联css) 这方面的例子 strong文本 // Option 1 Results <div> <span style="background-color: #ff0000; width: 33%"></sp
// Option 1 Results
<div>
<span style="background-color: #ff0000; width: 33%"></span>
</div>
// Option 2 Results
<div>
<span style="background-color: #ff0000; width: 16%"></span>
</div>
//选项1结果
//备选案文2结果
等等
你知道有什么更好的技术吗?或者大多数人都是这样做的?是的,这是一个很好的方法 以下是同样的想法,但更加精致: HTML:
<div class="pollBars">
<span class="t1" style="width: 10%">69</span>
<span class="t1" style="width: 20%">100</span>
<span class="t1" style="width: 70%">200</span>
<span class="t2" style="width: 90%">666</span>
<span class="t2" style="width: 120%">Over 9000!!</span>
</div>
.pollBars {
width: 300px;
background: #ccc
}
.pollBars span {
display: block;
padding: 3px;
margin: 7px 0;
font: bold 14px/1 sans-serif;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 1px 1px 1px #444;
}
.t1 {
color: #fff;
border: 1px solid red;
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
}
.t2 {
color: #fff;
border: 1px solid blue;
background: #6db3f2; /* old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */
}
是的,这是一个很好的方法 以下是同样的想法,但更加精致: HTML:
<div class="pollBars">
<span class="t1" style="width: 10%">69</span>
<span class="t1" style="width: 20%">100</span>
<span class="t1" style="width: 70%">200</span>
<span class="t2" style="width: 90%">666</span>
<span class="t2" style="width: 120%">Over 9000!!</span>
</div>
.pollBars {
width: 300px;
background: #ccc
}
.pollBars span {
display: block;
padding: 3px;
margin: 7px 0;
font: bold 14px/1 sans-serif;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 1px 1px 1px #444;
}
.t1 {
color: #fff;
border: 1px solid red;
background: #f85032; /* old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */
}
.t2 {
color: #fff;
border: 1px solid blue;
background: #6db3f2; /* old browsers */
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */
}
没问题:)我用这个快速得到梯度:没问题:)我用这个快速得到梯度: