jQuery实现影院选座订座效果，供大家参考，具体内容如下

效果如下：

代码如下：

jQuery影院选座订座效果代码

.demo {

width: 700px;

margin: 40px auto 0 auto;

min-height: 450px;

}

@media screen and (max-width: 360px) {

.demo {

width: 340px

}

}

.front {

width: 300px;

margin: 5px 32px 45px 32px;

background-color: #f0f0f0;

color: #666;

text-align: center;

padding: 3px;

border-radius: 5px;

}

.booking-details {

float: right;

position: relative;

width: 200px;

height: 450px;

}

.booking-details h3 {

margin: 5px 5px 0 0;

font-size: 16px;

}

.booking-details p {

line-height: 26px;

font-size: 16px;

color: #999

}

.booking-details p span {

color: #666

}

div.seatCharts-cell {

color: #182C4E;

height: 25px;

width: 25px;

line-height: 25px;

margin: 3px;

float: left;

text-align: center;

outline: none;

font-size: 13px;

}

div.seatCharts-seat {

color: #fff;

cursor: pointer;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

div.seatCharts-row {

height: 35px;

}

div.seatCharts-seat.available {

background-color: #B9DEA0;

}

div.seatCharts-seat.focused {

background-color: #76B474;

border: none;

}

div.seatCharts-seat.selected {

background-color: #E6CAC4;

}

div.seatCharts-seat.unavailable {

background-color: #472B34;

cursor: not-allowed;

}

div.seatCharts-container {

border-right: 1px dotted #adadad;

width: 400px;

padding: 20px;

float: left;

}

div.seatCharts-legend {

padding-left: 0px;

position: absolute;

bottom: 16px;

}

ul.seatCharts-legendList {

padding-left: 0px;

}

.seatCharts-legendItem {

float: left;

width: 90px;

margin-top: 10px;

line-height: 2;

}

span.seatCharts-legendDescription {

margin-left: 5px;

line-height: 30px;

}

.checkout-button {

display: block;

width: 80px;

height: 24px;

line-height: 20px;

margin: 10px auto;

border: 1px solid #999;

font-size: 14px;

cursor: pointer

}

#selected-seats {

max-height: 150px;

overflow-y: auto;

overflow-x: none;

width: 200px;

}

#selected-seats li {

float: left;

width: 72px;

height: 26px;

line-height: 26px;

border: 1px solid #d3d3d3;

background: #f7f7f7;

margin: 6px;

font-size: 14px;

font-weight: bold;

text-align: center

}

var price = 70; /*票价*/

$(document).ready(function() {

var $cart = $('#selected-seats'),

/*座位区*/

$counter = $('#counter'),

/*票数*/

$total = $('#total'); /*总计金额*/

var sc = $('#seat-map').seatCharts({

map: [ /*座位图*/

'aaaaaaaaaa',

'aaaaaaaaaa',

'__________',

'aaaaaaaa__',

'aaaaaaaaaa',

'aaaaaaaaaa',

'aaaaaaaaaa',

'aaaaaaaaaa',

'aaaaaaaaaa',

'aa__aa__aa'

],

naming: {

top: false,

getLabel: function(character, row, column) {

return column;

}

},

legend: { /*定义图例*/

node: $('#legend'),

items: [

['a', 'available', '可选座'],

['a', 'unavailable', '已售出']

]

},

click: function() { /*点击事件*/

if (this.status() == 'available') { /*可选座*/

$('

' + (this.settings.row + 1) + '排' + this.settings.label + '座')

.attr('id', 'cart-item-' + this.settings.id)

.data('seatId', this.settings.id)

.appendTo($cart);

$counter.text(sc.find('selected').length + 1);

$total.text(recalculateTotal(sc) + price);

return 'selected';

} else if (this.status() == 'selected') { /*已选中*/

/*更新数量*/

$counter.text(sc.find('selected').length - 1);

/*更新总计*/

$total.text(recalculateTotal(sc) - price);

/*删除已预订座位*/

$('#cart-item-' + this.settings.id).remove();

/*可选座*/

return 'available';

} else if (this.status() == 'unavailable') { /*已售出*/

return 'unavailable';

} else {

return this.style();

}

}

});

/*已售出的座位*/

sc.get(['1_2', '4_4', '4_5', '6_6', '6_7', '8_5', '8_6', '8_7', '8_8', '10_1', '10_2']).status('unavailable');

});

/*计算总金额*/

function recalculateTotal(sc) {

var total = 0;

sc.find('selected').each(function() {

total += price;

});

return total;

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。