html5交互式地铁线路图,HTML5 SVG城市地铁路线图动画演示

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// https://uimovement.com/ui/2806/metro-line-selection/

var selPos = 0;

var moving = false;

// Function to highlight selected track

function display_track(num) {

$('.junction, body').removeClass('act1 act2 act3 act4');

$('.track, .station, .junction').removeClass('active');

if (num) {

$('.track.line' + num + ', .station.line' + num).addClass('active');

$('.junction.line' + num + ', body').addClass('act' + num);

} else {

$('.track, .station, .junction').addClass('active');

}

};

// Button moving functions

function move_buttons_left() {

if (selPos > 0) {

$.each($('.track-select'), function() {

$(this).css('left', ((parseFloat($(this).css('left')) / $('.select-container').width()) * 100 + 50) + '%');

});

selPos--;

// Display selected track

display_track(selPos || '');

};

};

function move_buttons_right() {

if (selPos < ($('.track-select').length - 1)) {

$.each($('.track-select'), function() {

$(this).css('left', ((parseFloat($(this).css('left')) / $('.select-container').width()) * 100 - 50) + '%');

});

selPos++;

// Display selected track

display_track(selPos || '');

};

};

// Mover click function

$('.mover').click(function() {

if (!moving) {

// Move left or right

if ($(this).hasClass('left')) {

move_buttons_left();

} else if ($(this).hasClass('right')) {

move_buttons_right();

};

// For timing so the user doesnt call function while the cards are moving

moving = true;

setTimeout(function() {

moving = false;

}, 400);

}

});

// Display selected track

// $('.track-select').click(function(){ display_track($(this).attr('name')); });

$(document).ready(function() {

display_track();

// For Mobile - Swipe stuff that I stole from the internet

document.getElementsByClassName('select-container')[0].addEventListener('touchstart', handleTouchStart, false);

document.getElementsByClassName('select-container')[0].addEventListener('touchmove', handleTouchMove, false);

var xDown = null;

var yDown = null;

function handleTouchStart(evt) {

xDown = evt.touches[0].clientX;

yDown = evt.touches[0].clientY;

};

function handleTouchMove(evt) {

if (!xDown || !yDown) {

return;

}

var xUp = evt.touches[0].clientX;

var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;

var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {

if (xDiff > 0) {

move_buttons_right()

} else {

move_buttons_left();

}

} else {

if (yDiff > 0) {

/* up swipe */

} else {

/* down swipe */

}

}

/* reset values */

xDown = null;

yDown = null;

};

});