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图像)

所以最终我希望最终结果看起来像一个小火车. (因此前两个车轴左侧,最后两个车轴右侧)在火车图像下方.
像这样：

@H_502_31@

我不知道为什么有这么多人赞成这个问题.

对我来说似乎很不清楚.我无法得到什么问题？

我想唯一的问题是如何为车轴生成动态余量.

但即使这个问题也没有明确提出,预期结果也没有得到很好的描述.

所以这是我的猜测：

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}];

http://codepen.io/anon/pen/QbwRMJ

@H_502_31@ 原文链接：https://www.f2er.com/php/136303.html

上一篇：php – 使用MAMP在Mac OSX上构建/安下一篇：在OSX上通过PEAR安装的PhpDocument

php – 在foreach中按百分比定位

猜你在找的PHP相关文章