果图

各位观众老爷大家好！

今天给大家带来的是：3D电影院座位在线选座代码！

效果可见上面GIF图

下面是代码文件

由于代码过长，这里就只选择把JS源码分享出来！

需要文档版源码来我的前端群581549454，已上传到群文件

JS源码：

/**

* main.js

* http://www.codrops.com

*

* Licensed under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*

* Copyright 2015, Codrops

* http://www.codrops.com

*/

;(function(window) {

'use strict';

/**

* some helper functions

*/

/**********************************************/

/** https://gist.github.com/desandro/1866474 **/

/**********************************************/

var lastTime=0;

var prefixes='webkit moz ms o'.split(' ');

// get unprefixed rAF and cAF, if present

var requestAnimationFrame=window.requestAnimationFrame;

var cancelAnimationFrame=window.cancelAnimationFrame;

// loop through vendor prefixes and get prefixed rAF and cAF

var prefix;

for( var i=0; i < prefixes.length; i++ ) {

if ( requestAnimationFrame && cancelAnimationFrame ) {

break;

}

prefix=prefixes[i];

requestAnimationFrame=requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];

cancelAnimationFrame=cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] ||

window[ prefix + 'CancelRequestAnimationFrame' ];

}

// fallback to setTimeout and clearTimeout if either request/cancel is not supported

if ( !requestAnimationFrame || !cancelAnimationFrame ) {

requestAnimationFrame=function( callback, element ) {

var currTime=new Date().getTime();

var timeToCall=Math.max( 0, 16 - ( currTime - lastTime ) );

var id=window.setTimeout( function() {

callback( currTime + timeToCall );

}, timeToCall );

lastTime=currTime + timeToCall;

return id;

};

cancelAnimationFrame=function( id ) {

window.clearTimeout( id );

};

}

function throttle(fn, delay) {

var allowSample=true;

return function(e) {

if (allowSample) {

allowSample=false;

setTimeout(function() { allowSample=true; }, delay);

fn(e);

}

};

}

// from http://www.quirksmode.org/js/events_properties.html#position

function getMousePos(e) {

var posx=0;

var posy=0;

if (!e) var e=window.event;

if (e.pageX || e.pageY) {

posx=e.pageX;

posy=e.pageY;

}

else if (e.clientX || e.clientY) {

posx=e.clientX + document.body.scrollLeft

+ document.documentElement.scrollLeft;

posy=e.clientY + document.body.scrollTop

+ document.documentElement.scrollTop;

}

return {

x : posx,

y : posy

}

}

// equation of a line

function lineEq(y2, y1, x2, x1, currentVal) {

// y=mx + b

var m=(y2 - y1) / (x2 - x1),

b=y1 - m * x1;

return m * currentVal + b;

}

var support={transitions : Modernizr.csstransitions},

transEndEventNames={'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend'},

transEndEventName=transEndEventNames[Modernizr.prefixed('transition')],

onEndTransition=function(el, callback) {

var onEndCallbackFn=function( ev ) {

if( support.transitions ) {

if( ev.target !=this ) return;

this.removeEventListener( transEndEventName, onEndCallbackFn );

}

if( callback && typeof callback==='function' ) { callback.call(this); }

};

if( support.transitions ) {

el.addEventListener( transEndEventName, onEndCallbackFn );

}

else {

onEndCallbackFn();

}

},

// main container

container=document.querySelector('.container'),

// the 3D element - the room

room=container.querySelector('.cube'),

// the seat rows inside the 3D element

rows=[].slice.call(room.querySelectorAll('.rows > .row')),

// total amount of rows

totalRows=rows.length,

// seats

seats=[].slice.call(room.querySelectorAll('.row__seat')),

// the plan/map

plan=document.querySelector('.plan'),

// seats on the plan/map

planseats=[].slice.call(plan.querySelectorAll('.row__seat')),

// the screen

monitor=room.querySelector('.screen'),

// the video element

video=monitor.querySelector('video'),

// play video control

playCtrl=monitor.querySelector('button.action--play'),

// intro element

intro=monitor.querySelector('.intro'),

// 'select your seats' control

selectSeatsCtrl=intro.querySelector('button.action--seats'),

// the tilt control

tiltCtrl=document.querySelector('.action--lookaround'),

// how much the camera rotates when the user moves the mouse

tiltRotation={

rotateX : 25, // a relative rotation of -25deg to 25deg on the x-axis

rotateY : 15 // a relative rotation of -15deg to 15deg on the y-axis

},

// controls whether the tilt is active or not

tilt=false,

// window sizes

winsize={width: window.innerWidth, height: window.innerHeight},

// width of one seat

seat_width=seats[0].offsetWidth,

// number of seats per row

seats_row=rows[0].children.length,

// the sum of the room′s left margin with the room′s right margin is four times the width of a seat

side_margin=4 * seat_width,

// if the following is changed, the CSS values also need to be adjusted (and vice-versa)

// distance from first row to the screen

row_front_gap=800,

// distance between rows

row_back=100,

// the gap of seats in the middle of the room (equivalent to two columns of seats)

row_gap_amount=2,

// perspective value

perspective=2000,

// transition settings for the room animations (moving camera to seat)

transitionOpts={'speed' : 1000, 'easing' : 'cubic-bezier(.7,0,.3,1)'},

// the room dimentions

roomsize={

x : seats_row * seat_width + side_margin + row_gap_amount * seat_width,

y : 1000, // SCSS $cube_y

z : 3000 // SCSS $cube_z

},

// the initial values for the room transform

initTransform={

translateX : 0,

translateY : roomsize.y/3.5, // view from top..

translateZ : 0,

rotateX : -15, // ..looking down

rotateY : 0

},

// the current room transform

roomTransform=initTransform;

function init() {

// scale room to fit viewport

scaleRoom();

// initial view (zoomed screen)

applyRoomTransform({'translateX' : 0, 'translateY' : 0, 'translateZ' : 1300, 'rotateX' : 0, 'rotateY' : 0});

// bind events

initEvents();

}

function applyRoomTransform(transform) {

room.style.WebkitTransform=room.style.transform=transform ? 'translate3d(0,0,' + perspective + 'px) rotate3d(1,0,0,' + transform.rotateX + 'deg) rotate3d(0,1,0,' + transform.rotateY + 'deg) translate3d(' + transform.translateX + 'px, ' + transform.translateY + 'px, ' + transform.translateZ + 'px)'

: 'translate3d(0,0,' + perspective + 'px) rotate3d(1,0,0,' + roomTransform.rotateX + 'deg) rotate3d(0,1,0,' + roomTransform.rotateY + 'deg) translate3d(' + roomTransform.translateX + 'px, ' + roomTransform.translateY + 'px, ' + roomTransform.translateZ + 'px)';

}

function applyRoomTransition(settings) {

var settings=settings || transitionOpts;

room.style.WebkitTransition='-webkit-transform ' + settings.speed + 'ms ' + settings.easing;

room.style.transition='transform ' + settings.speed + 'ms ' + settings.easing;

}

function removeRoomTransition() {

room.style.WebkitTransition=room.style.transition='none';

}

function scaleRoom() {

var factor=winsize.width / roomsize.x;

container.style.WebkitTransform=container.style.transform='scale3d(' + factor + ',' + factor + ',1)';

}

function initEvents() {

// select a seat

var onSeatSelect=function(ev) { selectSeat(ev.target); };

planseats.forEach(function(planseat) {

planseat.addEventListener('click', onSeatSelect);

});

// enabling/disabling the tilt

var onTiltCtrlClick=function() {

// if tilt is enabled..

if( tilt ) {

disableTilt();

}

else {

enableTilt();

}

};

tiltCtrl.addEventListener('click', onTiltCtrlClick);

// mousemove event / tilt functionality

var onMouseMove=function(ev) {

requestAnimationFrame(function() {

if( !tilt ) return false;

var mousepos=getMousePos(ev),

// transform values

rotX=tiltRotation.rotateX ? roomTransform.rotateX - (2 * tiltRotation.rotateX / winsize.height * mousepos.y - tiltRotation.rotateX) : 0,

rotY=tiltRotation.rotateY ? roomTransform.rotateY + (2 * tiltRotation.rotateY / winsize.width * mousepos.x - tiltRotation.rotateY) : 0;

// apply transform

applyRoomTransform({'translateX' : roomTransform.translateX, 'translateY' : roomTransform.translateY, 'translateZ' : roomTransform.translateZ, 'rotateX' : rotX, 'rotateY' : rotY});

});

};

document.addEventListener('mousemove', onMouseMove);

// select seats control click (intro button): show the room layout

var onSelectSeats=function() {

classie.remove(intro, 'intro--shown');

classie.add(plan, 'plan--shown');

classie.add(playCtrl, 'action--faded');

zoomOutScreen(function() {

showTiltCtrl();

});

};

selectSeatsCtrl.addEventListener('click', onSelectSeats);

// play video

playCtrl.addEventListener('click', videoPlay);

// ended video event

video.addEventListener('ended', videoLoad);

// window resize: update window size

window.addEventListener('resize', throttle(function(ev) {

winsize={width: window.innerWidth, height: window.innerHeight};

scaleRoom();

}, 10));

}

function showTiltCtrl() {

classie.add(tiltCtrl, 'action--shown');

}

// select a seat on the seat plan

function selectSeat(planseat) {

if( classie.has(planseat, 'row__seat--reserved') ) {

return false;

}

if( classie.has(planseat, 'row__seat--selected') ) {

classie.remove(planseat, 'row__seat--selected');

return false;

}

// add selected class

classie.add(planseat, 'row__seat--selected');

// the real seat

var seat=seats[planseats.indexOf(planseat)];

// show the seat′s perspective

previewSeat(seat);

}

// preview perspective from the selected seat. Moves the camera to that position.

function previewSeat(seat) {

// disable tilt

disableTilt();

// change transition properties

applyRoomTransition();

// getComputedStyle: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

var st=window.getComputedStyle(seat.parentNode, null),

tr=st.getPropertyValue('-webkit-transform') ||

st.getPropertyValue('-moz-transform') ||

st.getPropertyValue('-ms-transform') ||

st.getPropertyValue('-o-transform') ||

st.getPropertyValue('transform') ||

'Either no transform set, or browser doesn′t do getComputedStyle';

if( tr==='none' ) return;

var values=tr.split('(')[1],

values=values.split(')')[0],

values=values.split(','),

// translateY value of this seat′s row

y=values[13],

// translateZ value of this seat′s row

z=values[14],

// seat′s center point (x-axis)

seatCenterX=seat.offsetLeft + side_margin/2 + seat.offsetWidth/2,

// translateX, translateY and translateZ values

tx=seatCenterX < roomsize.x/2 ? initTransform.translateX + (roomsize.x/2 - seatCenterX) : initTransform.translateX - (seatCenterX - roomsize.x/2),

ty=roomsize.y/2 - (roomsize.y - Math.abs(y)) + seat.offsetHeight + 10, // add a small extra

tz=Math.abs(z)+10, // add a small extra

// calculate how much to rotate in the x-axis (the more close to the screen the more we need to rotate)

firstRowZ=roomsize.z - row_front_gap,

lastRowZ=firstRowZ - (totalRows - 1 + row_gap_amount) * row_back,

// calculate how much to rotate in the y-axis (the more close to the screen the more we need to rotate.

// Also the same applies when the distance from the center of the room to both sides increases.

// for the last row:

minRotY_1=0, maxRotY_1=20, // min and max values for y rotation

initialTranslationX=0, finalTranslationX=roomsize.x/2,

rotY_1=lineEq(minRotY_1, maxRotY_1, initialTranslationX, finalTranslationX, tx),

// for the first row:

minRotY_2=0, maxRotY_2=50, // min and max values for y rotation

rotY_2=lineEq(minRotY_2, maxRotY_2, initialTranslationX, finalTranslationX, tx),

// final:

rotY=lineEq(rotY_1, rotY_2, lastRowZ, firstRowZ, Math.abs(z));

// room transforms

roomTransform={

translateX : tx,

translateY : ty,

translateZ : tz,

rotateX : 0,//rotX,

rotateY : rotY

};

// apply transform

applyRoomTransform();

onEndTransition(room, function() {

removeRoomTransition();

});

}

function zoomOutScreen(callback) {

applyRoomTransition({'speed' : 1500, 'easing' : 'ease'});

applyRoomTransform(initTransform);

onEndTransition(room, function() {

removeRoomTransition();

callback.call();

});

}

function disableTilt() {

classie.add(tiltCtrl, 'action--disabled');

tilt=false;

}

function enableTilt() {

classie.remove(tiltCtrl, 'action--disabled');

tilt=true;

}

function videoPlay() {

// hide the play control

classie.remove(playCtrl, 'action--shown');

video.currentTime=0;

video.play();

}

function videoLoad() {

// show the play control

classie.add(playCtrl, 'action--shown');

video.load();

}

init();

})(window);