为飞机建造一个带有翅膀的座位图

Question

我必须使用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/

问题仍然是,我希望飞机外侧的边界,而不是机舱内的边界.

Answer 1

这是我的解决方案，两个翅膀都有 CSS：

http://jsfiddle.net/0Lu4vspq/6/

#wings {
    border: solid 5px #333;
    width: 80px;
    position: relative;
    left: 155px;
}

和

<div id="wings"></div>

代码之前和之后。

更新

您可以通过 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;因为它是多余的。