特效描述:html5 环形流程图 可添加流程图代码。html5流程图代码
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
var radio = 160;
var radio_arrows =140;
var container_width = 420, container_height=420;
var c_container_width = 420, c_container_height=420;
$(".ciclo1").smartCycle({
container_width: '420px',
container_height: '420px',
radio: radio,
radio_arrows: radio_arrows,
arrows_colors:['#40A4C0'],
colors:['#928fa2','#928fa2']
});
var alphabet = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','Ñ','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var alphabet_pos =6;
$(".add").click(function(){
$(".ciclo1").append(''+alphabet[alphabet_pos]+'');
radio+=25;
radio_arrows+=25;
container_width+=50;
container_height+=50;
c_container_width+=50;
c_container_height+=50;
$(".contenedor").css({
'width':c_container_width+'px',
'height':c_container_height+'px'
});
$(".ciclo1").smartCycle('options',{'radio': radio, 'radio_arrows': radio_arrows, 'container_width': container_width+'px',
'container_height': container_height+'px',});
$(".ciclo1").smartCycle('realign');
alphabet_pos+=1;
});