% 이미지를 만드는 방법

나는 PHP를 배우고 있으며 간단한 투표를 실시했습니다. 그것은 작동하고 각 질문에 대한 백분율을 보여줍니다 (총 3 개의 질문이 있음), 또한 백분율을 보여주는 막대를 표시하고 싶습니다 (첫 번째 질문이 50 %이고 막대가 100px 인 경우 그 질문은 50 픽셀이어야합니다).% 이미지를 만드는 방법

여기에 최종 숫자 (백분율)가있는 값이 있습니다.

$ fr = round (($ f/$ total) * 100); $ sr = round (($ s/$ total) * 100); $ tr = round (($ t/$ total) * 100);

출처

2012-10-02 Dzumla

대신 HTML의 이미지를 사용하기 위해 특별한 이유? –

그 모든 vars가 무엇을 나타내는 지 알면 조금은 도움이 될 것입니다 ... – Salketer

막대의 명확한 크기를 설정하고 각 질문의 비율로 축소하는 한 아무 것도 좋습니다. – Dzumla

당신은 이미지를 요구하고 있지만이 쉽게 HTML에서 이루어집니다

<div id="container" style="width: 100px"> 
    <div style="background-color:#F00;width=50%">&nbsp;</div> 
</div>

출처

2012-10-02 13:20:27

좋은 하나! 나는 이것을 약간 수정했고 물론 PHP 변수를 사용했지만 이것은 기본적으로 나를 구했다. 감사! – Dzumla

는이 작업을 복잡하게 걸쳐있어.

<div class="meter"> 
    <span class="percentage" style="width: 25%"></span> 
</div> 


.meter { width: 150px; border 2px solid #666; } 
.percentage { background-color: #00FF00; }

출처

2012-10-02 13:21:03 wesside

OP는 역동적 인 스타일링을 원합니다. –

이렇게 인라인에 넣으십시오. 아무도 그를 막을 수 없다. – wesside

다른 사람들은 이미이 게시 한하지만 샘플을 코딩하고 어쨌든

라이브 샘플을 게시하기로 결정 http://jsfiddle.net/vG6jy/4/

CSS

.bar{ 
    height:16px; 
    width:300px; 
    border:1px solid #999; 
    margin:15px; 
    background: #b3bead; 
    background: -moz-linear-gradient(top, #b3bead 0%, #dfe5d7 60%, #fcfff4 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3bead), color-stop(60%,#dfe5d7), color-stop(100%,#fcfff4)); 
    background: -webkit-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); 
    background: -o-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); 
    background: -ms-linear-gradient(top, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); 
    background: linear-gradient(to bottom, #b3bead 0%,#dfe5d7 60%,#fcfff4 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3bead', endColorstr='#fcfff4',GradientType=0); 
} 
.bar .value{ 
    height:100%; 
    background: #87e0fd; 
    background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); 
    background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
    background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
    background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
    background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); 
}

HTML을

<div class="bar"> 
    <div class="value" style="width:0%;"></div> 
</div> 
<div class="bar"> 
    <div class="value" style="width:25%;"></div> 
</div> 
<div class="bar"> 
    <div class="value" style="width:50%;"></div> 
</div> 
<div class="bar"> 
    <div class="value" style="width:75%;"></div> 
</div> 
<div class="bar"> 
    <div class="value" style="width:100%;"></div> 
</div>

PHP

<div class="bar"> 
    <div class="value" style="width:<?php echo $fr; ?>%;"></div> 
</div>

출처

2012-10-02 13:24:21 Dutchie432

나는 당신의 코드에 약간의 역할을했다. http://jsfiddle.net/vG6jy/6/ :) 지루하다. –

@MihaiIorga : 그렇다면 단순히 CSS3 애니메이션을 사용하지 않는 것이 좋을까? :) –

@MihaiIorga : 니스! 추신 : IE는 CSS3 애니메이션에 대한 지원이 부족하지 않습니까? 이 jQuery 메서드가 마음에 듭니다 – Dutchie432

% 이미지를 만드는 방법

답변

관련 문제