如何使用css或jquery制作水平曲线

问题描述 投票：0回答：1

我正在为一个客户开发一个网站，这个网站有这样的功能，用户可以选择一个座位，但我正在努力如何使它弯曲，如下图所示

http://prntscr.com/nd77f1

到目前为止，我在下面的表格中尝试了它：

HTML

<table class="seats">
    <tr>
        <td>H</td>
        <td></td>
        <td></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>G</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td> 
    </tr>
    <tr>
        <td>F</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>E</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>D</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>C</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>B</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>A</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
    </tr>
    <tr>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
    </tr>
</table>

SCSS

.seats{
    display: inline-block;
    tr td{
        text-align: center;
        color: #89909C;
        font-size: 25px;
        padding: 20px 3px 0 3px;
    }
    a{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 21px;
        background: #89909C;
        border-radius: 100%;
        transition: 0.5s;
        &:after{
            content: '';
            position: absolute;
            top: 7px;
            left: 0;
            width: 40px;
            height: 21px;
            border-radius: 100%;
            border-bottom: 4px solid #89909C;
            transition: 0.5s;
        }
        &.selected{
            background: @color-red3 !important;
            &:after{
                border-color: @color-red3 !important;
            }
        }
        &.available{
            background: #89909C;
            &:after{
                border-color: #89909C;
            }
        }
        &.busy{
            background: #2B374E;
            &:after{
                border-color: #2B374E;
            }
        }
        &.family{
            background: @color-orange4;
            &:after{
                border-color: @color-orange4;
            }
        }
    }
}

我不知道哪个好，无论是使用列表还是表，但无论如何只要它正常工作对我好。这是我工作的代码，https://codepen.io/nikkodelacruz/pen/LvQLje希望有人可以帮助我，谢谢

css
1个回答
1
投票

尽管可以实现，但使用纯HTML / CSS处理这么多单元格并不容易。

我将每列视为子组件。首先，要使每个列旋转不同的程度，您需要通过column => cell重构DOM，而不是像常规表那样重新调整row => cell。

然后我使用JS来处理大量的单元格，因此我不必手动为每列分配旋转值。

这方面的缺点是每个单元都必须有固定的宽度和高度。

let columnCount = document.querySelectorAll(".seats .column").length
    for(let i = 0; i< columnCount; i++){
        let el = document.querySelectorAll(".seats .column")[i]

        if(columnCount % 2 == 0) {
            let columnMiddle = document.querySelectorAll(".seats .column")[columnCount/2]
            var distance = columnMiddle.getBoundingClientRect().x - el.getBoundingClientRect().x
        } else {
            let columnMiddleLeft = document.querySelectorAll(".seats .column")[Math.floor(columnCount/2)]
            let columnMiddleRight = document.querySelectorAll(".seats .column")[Math.ceil(columnCount/2)]
            let averageMiddle = (columnMiddleLeft.getBoundingClientRect().x + columnMiddleRight.getBoundingClientRect().x)/2
            var distance = averageMiddle - el.getBoundingClientRect().x

        }
        el.style.transformOrigin = distance + "px 0"
        el.style.transform = "rotate(" + (columnCount/2-i) + "deg)"
    }
.seats {
  display: inline-block;
}

.seats tr td {
  text-align: center;
  color: #89909C;
  font-size: 25px;
  padding: 20px 3px 0 3px;
}

.seats a {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;
  background: #89909C;
  border-radius: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 40px;
  height: 21px;
  border-radius: 100%;
  border-bottom: 4px solid #89909C;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a.selected {
  background: #E8564F !important;
}

.seats a.selected:after {
  border-color: #E8564F !important;
}

.seats a.available {
  background: #89909C;
}

.seats a.available:after {
  border-color: #89909C;
}

.seats a.busy {
  background: #2B374E;
}

.seats a.busy:after {
  border-color: #2B374E;
}

.seats a.family {
  background: #FFB548;
}

.seats a.family:after {
  border-color: #FFB548;
}

.seats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5rem;
}

.seats .seat {
  height: 40px;
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
<div class="seats">
        <div class="column">
                <div class="seat">H</div>
                <div class="seat">G</div>
                <div class="seat">F</div>
                <div class="seat">E</div>
                <div class="seat">D</div>
                <div class="seat">C</div>
                <div class="seat">B</div>
                <div class="seat">A</div>
                <div class="seat column-number"></div>
            </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">1</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">2</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">3</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">4</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">5</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">6</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">7</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">8</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">9</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">10</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">11</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">12</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">13</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">14</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">15</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">16</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">17</div>
        </div>
    </div>

https://codepen.io/krugtep/pen/rbJGYE

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.