在foreach中按百分比定位

时间：2015-04-23 09:41:34

标签： php html css html5 mysqli

我现在有一个看起来像这样的页面：

How the page looks

，代码是：

<?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个）都有距离。 Soo：

  • 轴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图像）

Database axles

所以最终我希望最终结果看起来像一个小火车。 （因此前两个车轴左侧，最后两个车轴右侧）在火车图像下方。 像这样： enter image description here

2 个答案:

答案 0 :(得分：1)

我不知道为什么有这么多人支持这个问题。

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

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

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

所以这是我的猜测：

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完成，只是为了阐明如何设置元素的动态边距和宽度。

所以你可以通过ch axles的值来玩这个片段，如：

axles = [{distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}, 
         {distance: 2000}];

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

答案 1 :(得分：0)

为此类功能创建了OOP。 我将给你一个小例子，我将如何构建它。该示例仅为您提供了如何执行此操作的提示，但此基础知识已经是一种非常灵活的构建方式。我没有测试它，但我知道原理是有效的，这就是这个例子的用途。

/*
    A wheel pattern is an ordering of a group of wheels and the required CSSclasses for each or all wheels.
*/
interface iWheelGroup{
    public function getPattern();
}


class BasePattern implements iWheelGroup{
    protected $pattern;

    public function __construct($pPattern){
        $this->pattern = $pPattern;
    }


    public function getPattern(){
        return $this->pattern;
    }

    public function __toString(){
        $tmp = "";
        if(is_null($this->getPattern()) === true){
            return $tmp;
        }
        $arClasses = explode('_&_', $this->getPattern());
        $max = count($arClasses);
        for($i=0;$i<$max;$i++){
            $tmp .= "<img class=\"".$arClasses[$i]."\" > ";
        }
        $tmp .= "\n";
        return $tmp;
    }
}


class WheelAndPattern extends BasePattern{
    protected $wheels;

    public function __construct($pWheels, $pPattern){
        $this->$wheels = $pWheels;
        parent::__construct($pPattern);
    }


    public function getWheels(){
        return $this->wheels;
    }

    public function __toString(){
        $tmp = "";
        if(is_null($this->getPattern()) === true || is_null($this->getWheels() === true)){
            return $tmp;
        }
        $arClasses = explode('_&_', $this->getPattern());
        $max = count($arClasses);

        $arWheeltypes = explode('_&_', $this->getWheels());
        $maxWheels = count($arWheeltypes);
        if($max === $maxWheels){
            for($i=0;$i<$max;$i++){
                $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[$i]."\> ";
            }
        }else{
            for($i=0;$i<$max;$i++){
                $tmp .= "<img class=\"".$arClasses[$i]."\" src=\"".$arWheeltypes[0]."\> ";
            }
        }
        $tmp .= "\n";
        return $tmp;
    }
}

$wg = new BasePattern('wheelsleft_&_wheelsleft_&_wheelsright_&_wheelsright');
$wg2= new WheelAndPattern('openWheel','wheelseven_&_wheelseven_&_wheelseven');
$wg3= new WheelAndPattern('blackWheel_&_greyWheel_&_whiteWheel','wheelsleft_&_wheelscenter_&_wheelsright');
print $wg.$wg2.$wg3;
相关问题
最新问题