jQuery对比PK进度条特效插件

使用方法：

引入CSS样式文件

<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

特效JS初始化、参数配置

var node=[
30,"男性",25,
70,"女性",75,
10,"60后",15,
20,"70后",15,
25,"80后",25,
40,"90后",35,
5,"其他年龄",10,
20,"未婚",25,
80,"已婚",75,
65,"有驾照",73,
35,"无驾照",27,
88,"有车",72,
12,"无车",28,
60,"有房",55,
40,"无房",45,
]
var col;
for(var i=0;i<node.length;i+=3){		
     col = 'rgb('+parseInt(( Math.random() *200 + 55 ),10)+','+
    parseInt(( Math.random() *200 + 55 ),10)+','+
    parseInt(( Math.random() *250 + 5 ),10)+ ')' ;
     
    var skill = document.createElement('div');
    skill.className = 'skill';
    $("#container").append(skill);
     var clearfix1 = document.createElement('div');
    clearfix1.className = 'skillbar1 clearfix';
     $(clearfix1).attr("data-percent",node[i]+"%")		
    skill.appendChild( clearfix1 );
    
    var bar1 = document.createElement('div');
    bar1.className = 'skillbar1-bar1';
    bar1.style.background = col;
    clearfix1.appendChild( bar1 );
    
    var percent1 = document.createElement('div');
    percent1.className = 'skill-bar-percent1';
    percent1.textContent = node[i]+'%';
    clearfix1.appendChild( percent1 );
    
    var title = document.createElement('div');
    title.className = 'skillbar-title';
    title.style.background = col;
    title.innerHTML = '<span>' +node[i+1]+'</span>';
    skill.appendChild( title );
     
     var clearfix = document.createElement('div');
    clearfix.className = 'skillbar clearfix';
     $(clearfix).attr("data-percent",node[i+2]+"%");		
    skill.appendChild( clearfix );
    
    var bar = document.createElement('div');
    bar.className = 'skillbar-bar';
    bar.style.background = col;
    clearfix.appendChild( bar );
    
    var percent = document.createElement('div');
    percent.className = 'skill-bar-percent';
    percent.textContent = node[i+2]+'%';
    clearfix.appendChild( percent ); 
            
}
$(document).ready(function(){
    $('.skillbar').each(function(){
        $(this).find('.skillbar-bar').animate({
            width:$(this).attr('data-percent')
        },2000);
    });
});
$(document).ready(function(){
    $('.skillbar1').each(function(){
        $(this).find('.skillbar1-bar1').animate({
            width:$(this).attr('data-percent')
        },2000);
    });
});

HTML结构

<div id="PK"></div>
<div id="container"></div>

用到的只有jQuery.js ie9以下也可以正常运行，只是缺少一些效果。 所有的div都是通过js动态生成的 案例的数据是写在一个数组里面。也可以改成list集合，这个可以按照自己的需求进行选择的 背景颜色也是随机生成的 不喜欢随机颜色的话也可以写一个颜色的数组。这些自动生成的div都是写在"container"下面的，与他并列的id="PK"的div可以自定义两个PK的图片，文字什么的，看需求而定。