<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery可生成循环流程图表特效 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="contenedor">
<div class="ciclo1">
<a class="sc_object">A</a>
<a class="sc_object">B</a>
<a class="sc_object">C</a>
<a class="sc_object">D</a>
<a class="sc_object">E</a>
<a class="sc_object">F</a>
<a class="sc_center">center</a>
</div>
</div>
<div class="btn add">Add</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smartCycle.min.js"></script>
<script>
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('<a class="sc_object">'+alphabet[alphabet_pos]+'</a>');
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;
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery可生成循环流程图表特效.zip
版权申诉
156 浏览量
2022-11-21
11:32:35
上传
评论
收藏 58KB ZIP 举报
jQuery可生成循环流程图表特效.zip （10个子文件） 
jQuery可生成循环流程图表特效 jiaoben3852 css 
default.css 6KB style.css 2KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 2KB js jquery-2.1.1.min.js 82KB smartCycle.min.js 4KB
jQuery可生成循环流程图表特效.jpg 35KB资源评论
