我必须使用
HTML,CSS和jQuery为飞机构建座位图.一般来说这没问题,但我不知道如何在飞机上添加机翼.
目前,我标记了座椅(放置在机翼上方),外边缘较暗.但这并不好.我想在飞机本身必须增加一些“翅膀”.或者,如果不是翅膀式,至少应该在“外面的飞机”上有一个边界.任何想法如何做到这一点？
目前,我标记了座椅(放置在机翼上方),外边缘较暗.但这并不好.我想在飞机本身必须增加一些“翅膀”.或者,如果不是翅膀式,至少应该在“外面的飞机”上有一个边界.任何想法如何做到这一点？
<div id="seatmap">
<div id="plane">
<table class="rows">
<tr>
<td>F</td>
</tr>
<tr>
<td>D</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>C</td>
</tr>
<tr>
<td>A</td>
</tr>
</table>
<div id="cabin">
<table>
<tr>
<td title="1F" class="seatAvailable"></td>
<td title="2F" class="seatUnavailable"></td>
<td title="" class="noSeatGalley"></td>
<td title="4F" class="ExtraPay"></td>
<td title="5F" class="seatAvailable wingSeat"></td>
<td title="6F" class="seatUnavailable wingSeat"></td>
<td title="7F" class="seatAvailable wingSeat"></td>
<td title="8F" class="noSeatStorage wingSeat"></td>
<td title="9F" class="seatAvailable"></td>
<td title="10F" class="seatAvailable"></td>
<td title="11F" class="seatAvailable LargeSeat"></td>
</tr>
<tr>
<td title="1D" class="seatAvailable"></td>
<td title="2D" class="seatUnavailable"></td>
<td title="" class="noSeatGalley"></td>
<td title="4D" class="ExtraPay"></td>
<td title="5D" class="seatAvailable"></td>
<td title="6D" class="seatUnavailable"></td>
<td title="7D" class="seatAvailable"></td>
<td title="8D" class="noSeatStorage"></td>
<td title="9D" class="seatAvailable"></td>
<td title="10D" class="seatAvailable"></td>
<td title="11D" class="seatAvailable ExtraPay LargeSeat"></td>
</tr>
<tr>
<td class="noSeatGalley">1</td>
<td class="noSeatGalley">2</td>
<td class="noSeatGalley"></td>
<td class="noSeatGalley">4</td>
<td class="noSeatGalley">5</td>
<td class="noSeatGalley">6</td>
<td class="noSeatGalley">7</td>
<td class="noSeatGalley">8</td>
<td class="noSeatGalley">9</td>
<td class="noSeatGalley">10</td>
<td class="noSeatGalley">11</td>
</tr>
<tr>
<td title="1C" class="seatAvailable"></td>
<td title="2C" class="seatAvailable"></td>
<td title="" class="noSeatGalley"></td>
<td title="4C" class="ExtraPay"></td>
<td title="5C" class="seatUnavailable"></td>
<td title="6C" class="seatAvailable"></td>
<td title="7C" class="seatAvailable"></td>
<td title="8C" class="noSeatLavatory"></td>
<td title="9C" class="seatAvailable"></td>
<td title="10C" class="seatAvailable"></td>
<td title="11C" class="seatAvailable ExtraPay LargeSeat"></td>
</tr>
<tr>
<td title="1A" class="seatAvailable"></td>
<td title="2A" class="seatAvailable"></td>
<td title="" class="noSeatGalley"></td>
<td title="4A" class="ExtraPay"></td>
<td title="5A" class="seatUnavailable wingSeat"></td>
<td title="6A" class="seatAvailable wingSeat"></td>
<td title="7A" class="seatAvailable wingSeat"></td>
<td title="8A" class="noSeatLavatory wingSeat"></td>
<td title="9A" class="seatAvailable"></td>
<td title="10A" class="seatAvailable"></td>
<td title="11A" class="seatUnavailable ExtraPay LargeSeat"></td>
</tr>
</table>
</div>
<div style="clear: both;"></div>
</div>
</div>
小提琴1：http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/1/
好的,我有另一个小提琴,有点更新.
在这里,我们可以更好地了解机翼的位置(或应该是) – >
小提琴2：http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/
问题仍然是,我希望飞机外侧的边界,而不是机舱内的边界.
解决方法
这是我的解决方案,两翼的CSS：
http://jsfiddle.net/0Lu4vspq/6/
#wings {
border: solid 5px #333;
width: 80px;
position: relative;
left: 155px;
}
和
<div id="wings"></div>
代码之前和之后.
UPDATE
您可以通过PHP动态编辑CSS.你需要一个不同的值,但在一个平面上只有两个翅膀.
如果位置相同(或者不是,你可以使用两个CSS代码用于左翼和右翼),你只需要找到机翼起点和长度的点.
此时CSS改变了这两点：
#wings {
border: solid 5px #333;
width: 80px; % <-- Length the wing
position: relative;
left: 153px; % <-- Where the wing start
}
第二次更新
如果你想要一个更像翼的东西,CSS将是：
#wings_down {
left: 155px;
width: 80px;
position: relative;
height: 50px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
background: #333;
}
#wings_up {
left: 155px;
width: 80px;
position: relative;
height: 50px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
transform: skew(-20deg);
background: #333;
}
http://jsfiddle.net/0Lu4vspq/17/
注意：我已删除border：solid 5px#333;因为它是多余的.
