脚本宝典收集整理的这篇文章主要介绍了php – 在foreach中按百分比定位，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
并且代码是：
<?PHP $count_axle = $database->count_axles($_GET['train_id']); foreach($count_axle as $counting){ }?> <div id="axle_bogie_border"> <img id="count_train_image" src="Images/add_train1.png" alt="Train look" style="width:<?PHP echo $counting['totaldistance']; ?>%"> <?PHP $show_axle = $database->axles($_GET['train_id']); ?> <div id="axle_posITion_count"> <?PHP foreach($show_axle as $axlefigure){ ?> <div id="count_axle_figure" style="margin-left:<?PHP echo $counting['totaldistance']; ?>%"> <?PHP echo $axlefigure['axle'] ?> </div> <?PHP } ?><br /><br /><br /> </div> </div>
和CSS：
#axle_bogie_border { border: 2px solid black; width: 100%; height: auto; overflow-x: scroll; white-space: Nowrap; } #count_train_image{ margin-left: 10%; margin-right: 10%; height: 100px; display: inline-block; position: relative; float: left; } #show_length{ border-bottom: 2px solid black; width: 100%; } #show_length2{ border-bottom: 2px solid black; width: 10%; } #axle_position_count { margin-top: 10%; margin-left: 10%; } #count_axle_figure { background: black; width: 40px; height: 40px; border-radius: 50px; float: left; }
对.所以我根据数据库的总和来制作图像的宽度.所以举个例子.您看到的每个圆圈(本例中为4个)都有距离.洙：
>轴1 = 2000
>轴2 = 8000
>轴3 = 2000
>轴4 = 8000
总共这是20.000mm 20.000mm = 20米.所以这列火车是20米.现在我将其缩小到PErcantages :(见图像宽度)
function count_axles($id) {
$sql = "SELECT (sum(distance))/(25000)*(100) as totaldistance From axle WHERE train_id = :train_id";
$sth = $this->pdo->PRepare($sql);
$sth->bindParam(":train_id",$id,PDO::PARAM_STR);
$sth->execute();
return $sth->fetchAll();
}
在这里我告诉我100％是25.000毫米(25米).
现在我还需要这个用于轴位置.
因此,轴1 =例如总数的10％.所以我需要它在左边10％(保证金)
轴2 = 5％.所以我需要左边的轴1 5％= 15％.
等等
每个轴都有自己的ID(这里是DB图像)
所以最终我希望最终结果看起来像一个小火车. (因此前两个车轴左侧,最后两个车轴右侧)在火车图像下方.
像这样：
对我来说似乎很不清楚.我无法得到什么问题？
我想唯一的问题是如何为车轴生成动态余量.
但即使这个问题也没有明确提出,预期结果也没有得到很好的描述.
所以这是我的猜测：
shift = -25; //my circle is 50px width
//so for the 1st Axel if distance=0
//circle must be shifted to the left by -25px
viewWidth = 800;
axles = [{distance: 2000},{distance: 8000},{distance: 2000},{distance: 8000}];
trainWidth = 0;
axles.forEach(function (axle) {
trainWidth += axle.distance;
});
width = Math.round(800*trainWidth/25000);
$('#train h2').text(""+(Math.round(trainWidth/10)/100)+"m");
unusedLeft = Math.round((viewWidth - width)/2);
unusedRight = unusedLeft;
$('#info .leftBox').width(""+unusedLeft+"px" );
unusedMeters = Math.round((25000-trainWidth)/10/2)/100;
$('#info .leftBox h3').text(""+unusedMeters+"m");
$('#info .rightBox h3').text(""+unusedMeters+"m");
$('#info .rightBox').width(""+unusedRight+"px" );
$('#train').width(""+width+"px" );
$('#axels').width(""+width+"px" );
idx = 0;
d = 0;
div = '';
axles.forEach(function (axle) {
idx++;
d += axle.distance;
axle.idx = idx;
margin = shift + Math.round(d*width/trainWidth);
axle.margin = margin;
div += '<div id="axel'+idx+'" style="margin-left: '+margin+'px ;" class="axel circle"></div>';
});
$('#axles').append(div);//.marginLeft(""+margin+"px");
h2,h3 {
text-align:center;
margin:2px auto;
}
.container {
width:800px;
height:400px;
border: solid 1px red;
}
#info {
width:800px;
height:20px;
border: none;
position:relative;
}
#info .leftBox {
left:0;
top:0;
height:20px;
width:75px;
border-bottom: 1px solid blue;
position:absolute;
}
#info .rightBox {
right:0;
top:0;
height:20px;
width:75px;
border-bottom: 1px solid blue;
position:absolute;
}
#train {
margin:3px auto;
width:650px;
height:200px;
background:black;
vertical-align:middle;
color:#FFFFFF;
}
#train h2{
margin:auto auto;
line-height:200px;
color:#FFFFFF;
}
#axles {
width:650px;
height:50px;
margin: 1px auto;
border: none;
position:relative;
}
.axel {
position: absolute;
float:left;
}
.circle {
width: 50px; height: 50px;
border-radius: 50%;
background: lightblue;
}
<script src="https://ajax.GOOGLEapis.COM/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h2>25m</h2> <hr /> <div id="info"> <div class="leftBox"><h3>2.5m</h3></div> <div class="rightBox"><h3>2.5m</h3></div> </div> <div id="train"> <h2>20m</h2> </div> <div id="axles"> </div>
现在只用JS完成,只是为了阐明如何设置元素的动态边距和宽度.
所以你只需要通过控制轴的值来玩这个片段,例如：
axles = [{distance: 2000},{distance: 2000}];
以上是脚本宝典为你收集整理的php – 在foreach中按百分比定位全部内容，希望文章能够帮你解决php – 在foreach中按百分比定位所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。