jquery 기반 컬러 투표 진행 코드 분석
아래 그림
중요 한 것 은 진도 조 를 실현 하 는 것 이다.
분석
원리:동적 설정
의 하위 요소의 너비 값.
1.간단 한 모형
만약 에 하나의 진도 바 만 있다 고 가정 하면 다음 과 같 습 니 다.우 리 는 p 요소 의 너비,span 요소 의 백분율 만 알 아야 합 니 다.곱 하면 span 의 폭 을 얻 을 수 있 습 니 다.브 라 우 저 를 불 러 올 때 동적 으로 span 의 폭 을 설정 하면 진도 바 의 효 과 를 실현 할 수 있 습 니 다.
<style>
.long{width:100px;border:1px solid #7f7f7f;height:14px;background-color:#d6d6d6;}
.short{float:left;height:14px;background-color:#0FF;}
</style>
<body>
<P class="long"><span class="short"></span></P>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var percent=0.5;
var longWidth=100;
var shortWidth=percent*longWidth;
$(".short").animate({width:shortWidth+"px"},'slow');
</script>
</body>
2.투표 진도 조항 실현 과정
첫 번 째 단계:
구 조 는 다음 과 같다.
<meta charset="utf-8">
<style>
/* */
ul,h4,p{margin:0;padding:0;}
/* */
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
body { font: 12px/1.5 arial, ; }
html, body { color: #333333; }
/* css*/
.vote-box-list{border:1px solid red;position:absolute;}
.vote-box-list li{list-style:none;margin:10px 0;}
.vote-item-wrap h4,.vote-item-wrap .vnum{float:left;font-size:14px;font-weight:normal;line-height:16px;}
.vote-item-wrap p{float:left;height:14px;width:200px;border:1px solid #E2E2E2;background-color:#EFEFEF;margin:0 10px;}
.vote-item-wrap p span{float:left;height:14px;/*width:30px;background-color:#c2f263;*/}
</style>
<ul class="vote-box-list clearfix" id="appVoteBox">
<li class="vl-item" id="voteItem0">
<div class="vote-item-wrap clearfix">
<h4>A:</h4>
<p class="litem"><span></span></p>
<span class="vnum">79(2%)</span>
</div>
</li>
<li class="vl-item" id="voteItem1" >
<div class="vote-item-wrap clearfix">
<h4>B:</h4>
<p class="litem"><span></span></p>
<span class="vnum">1986(61%)</span>
</div>
</li>
<li class="vl-item" id="voteItem2">
<div class="vote-item-wrap clearfix">
<h4>C:</h4>
<p class="litem"><span></span></p>
<span class="vnum">1153(36%)</span>
</div>
</li>
<li class="vl-item" id="voteItem3" >
<div class="vote-item-wrap clearfix">
<h4>D:</h4>
<p class="litem"><span></span></p>
<span class="vnum">415(13%)</span>
</div>
</li>
<li class="vl-item" id="voteItem4" >
<div class="vote-item-wrap clearfix">
<h4>E:</h4>
<p class="litem"><span></span></p>
<span class="vnum">89(3%)</span>
</div>
</li>
</ul>
span 에 width 와 배경 색 을 추가 하면 진도 바 의 효과 가 나타 납 니 다.이 단 계 는 js 로 이 루어 진다.두 번 째 단계,js 는 span 의 폭 을 설정 합 니 다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var Vote={};
Vote.ListShow=(function(){
var longWidth;
var percentArr=[];
var shortWidth=[];
var spanArr=[];
/* */
function init(o){
voteId=o.id;
longWidth=o.width;
percentArr=o.percent;
shortWidth=calWidth();
spanArr=findSpans();
}
/* span */
function calWidth(){
var arr=[];
for(var i=0;i<percentArr.length;i++){
var tempLength=percentArr[i]*longWidth;
arr.push(tempLength);
}
return arr;
}
/* span */
function findSpans(){
var litems=$("#"+voteId).find(".litem");
var arr=[]
for(var i=0;i<litems.length;i++){
arr.push(litems[i].children[0]);
}
return arr;
}
/* span */
function setWidth(){
for(i=0;i<percentArr.length;i++){
$(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
$(spanArr[i]).css({'background-color':"#c2f263"});
}
}
return {init:init,set:setWidth};
})();
/* */
Vote.ListShow.init(
{
id:'appVoteBox',
width:200-2 ,
percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();
</script>
효과:세 번 째 단계,js 설정 span 의 배경 색
두 번 째 단계 의 배경 색 은 모두 다음 과 같이 설정 되 어 있 습 니 다.
$(spanArr[i]).css({'background-color':"#c2f263"});
현재 배경 색 을 무 작위 로 생 성하 여 컬러 진행 바 를 만 듭 니 다.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var Vote={};
Vote.ListShow=(function(){
var longWidth;
var percentArr=[];
var shortWidth=[];
var spanArr=[];
var colorArr=[];
/* */
function init(o){
voteId=o.id;
longWidth=o.width;
percentArr=o.percent;
shortWidth=calWidth();
spanArr=findSpans();
colorArr=genColor();
}
/* span */
function calWidth(){
var arr=[];
for(var i=0;i<percentArr.length;i++){
var tempLength=percentArr[i]*longWidth;
arr.push(tempLength);
}
return arr;
}
/* span */
function findSpans(){
var litems=$("#"+voteId).find(".litem");
var arr=[]
for(var i=0;i<litems.length;i++){
arr.push(litems[i].children[0]);
}
return arr;
}
/*o , length */
function genColor() {
var o = [];
var n = ["#5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "#ee335f", "#fbe096", "#ffc535"]; //
var colorsArr = n.slice();
for (var i = 0;i < percentArr.length; i++){
//Math.random() 0.0 ~ 1.0 。
//Math.floor()
var k = Math.floor(Math.random()* colorsArr.length);
o.push(colorsArr[k]);
//
colorsArr.splice(k, 1);
if (colorsArr.length == 0){
colorsArr = n.slice()}
}
return o;
}
/* span */
function setWidth(){
for(i=0;i<percentArr.length;i++){
$(spanArr[i]).animate({width:shortWidth[i]+"px"},'slow');
$(spanArr[i]).css({'background-color':colorArr[i]});
}
}
return {init:init,set:setWidth};
})();
/* */
Vote.ListShow.init(
{
id:'appVoteBox',
width:200-2 ,
percent:[0.02,0.61,0.36,0.13,0.3],
});
Vote.ListShow.set();
</script>
최종 효과:이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.