WEB流程图(jquery实现)

<?//http://dcdc723.iteye.com  by 指尖 dcdc723
$i=100;
$h=$i/3;  //判断行数
?>
<html>
<head>
<title>test</title>
<script src="js/jquery-1.3.2.js"></script>
<script>
$(function(){var $h=<?=$h?>;  var $i=<?=$i?>;for(var $t=1;$t<$i+1;$t++){var $left="120px";var $dqh=Math.ceil($t/3);var $jo=($dqh%2);if($jo=="1"){var $lie=$t%3;switch($lie){case 1:$left="120px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"120px","background-image":"url(images/2.png)"});break;case 2:$left="420px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"271px","background-image":"url(images/1.png)"});break;case 0:$left="720px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"571px","background-image":"url(images/1.png)"});break;}}if($jo=="0"){var $lie=$t%3;switch($lie){case 1:$left="720px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"571px","background-image":"url(images/1.jpg)"});break;case 2:$left="420px";$("#s"+$t).css({"position":"absolute","width":"122px","height":"32px","z-index":"1","left":"271px","background-image":"url(images/1.jpg)"});break;case 0:$left="120px";break;}}if($dqh==1){$("#s"+$t).css({"top": "38px","position":"absolute"});$("#s"+$t).css({"position":"absolute"});$("#apDiv"+$t).css({"position":"absolute","width":"140px","height":"84px","z-index":"1","left":" "+$left+" ","background-color":"#6CF"});}if($dqh>1){var  $top=240;$top=($dqh-1)*240;$top=$top+"px";$("#s"+$t).css({"top": " "+$top+" ","position":"absolute"});$("#apDiv"+$t).css({"position":"absolute","width":"140px","height":"84px","z-index":"1","left":" "+$left+" ","top":" "+$top+" ","background-color":"#6CF"});
}}});
</script>
</head>
<body>
<?
for($t=1;$t<$i+1;$t++)
{
echo "<div id='apDiv$t'>第".$t."个阶段名</div>";
if($t!=1){
echo "<div id='s$t'>这里是阶段时间</div>";}
}
?>
</body>
</html>

 

你可能感兴趣的:(html,jquery,Web,css)