HTML5 SVG城市地铁路线图动画演示

Metro map with animation, 可用于地铁、高铁、公交路线规划图。

html5, metro, map

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 5839
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// 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;
    };

});

编译

CSS

* {
    box-sizing: border-box;
    -webkit-transition: 0.33s cubic-bezier(0.6, 0, 0.2, 1);
    transition: 0.33s cubic-bezier(0.6, 0, 0.2, 1);
}
.rela-block {
    display: block;
    position: relative;
}
.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
body {
    background-color: #ddd;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    background-color: #425263;
}
body.act1 {
    background-color: #feb538;
}
body.act2 {
    background-color: #ff5730;
}
body.act3 {
    background-color: #30d0fd;
}
body.act4 {
    background-color: #7fce85;
}
h2 {
    text-align: center;
    font-size: 24px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 15px 0 0;
}
.container {
    background-color: #f5f5f5;
    border-radius: 3px;
    box-shadow: 0 2px 10px -1px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}
.svg-container {
    height: 450px;
    width: 300px;
    padding-left: 15px;
}
.metro-svg {
    height: 100%;
    fill: none;
    stroke: #aaa;
}
.station {
    fill: #aaa;
    stroke: #f5f5f5;
    r: 7;
    stroke-width: 4;
}
.station.big-station {
    r: 12;
    stroke-width: 5;
}
.station.line1.active {
    fill: #feb538;
}
.station.line2.active {
    fill: #ff5730;
}
.station.line3.active {
    fill: #30d0fd;
}
.station.line4.active {
    fill: #7fce85;
}
.junction {
    height: 14px;
    width: 30px;
    fill: #aaa;
    stroke: #f5f5f5;
    stroke-width: 4;
    rx: 7;
}
.junction.active {
    fill: #425263;
}
.junction.act1 {
    fill: #feb538;
}
.junction.act2 {
    fill: #ff5730;
}
.junction.act3 {
    fill: #30d0fd;
}
.junction.act4 {
    fill: #7fce85;
}
.track {
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.track.line1.active {
    stroke: #feb538;
}
.track.line2.active {
    stroke: #ff5730;
}
.track.line3.active {
    stroke: #30d0fd;
}
.track.line4.active {
    stroke: #7fce85;
}
.select-container {
    height: 55px;
    width: 100%;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.3);
}
.mover {
    z-index: 5;
    position: absolute;
    height: 55px;
    width: 25%;
}
.mover.left {
    left: 0;
}
.mover.right {
    right: 0;
}
.track-select {
    z-index: 2;
    height: 30px;
    width: 42%;
    color: #fff;
    border-radius: 30px;
    line-height: 30px;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: default;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.2);
}
.track-select.ts0 {
    background-color: #425263;
}
.track-select.ts1 {
    background-color: #feb538;
}
.track-select.ts2 {
    background-color: #ff5730;
}
.track-select.ts3 {
    background-color: #30d0fd;
}
.track-select.ts4 {
    background-color: #7fce85;
}
.ts0 {
    left: 50%;
}
.ts1 {
    left: 100%;
}
.ts2 {
    left: 150%;
}
.ts3 {
    left: 200%;
}
.ts4 {
    left: 250%;
}
.ts5 {
    left: 300%;
}

HTML

<div class="abs-center container">
    
    <h2>H5 城市地铁地图 | 公交路线图</h2>

<div class="rela-block svg-container">
        <svg viewbox="0 0 300 450" class="metro-svg">

<path class="track line1" d="M 60 400 L 110 400 Q 130 400 130 380 L 130 180 
                                         Q 130 160 110 160 L 20 160" />
            <path class="track line2" d="M 165 430 L 145 405 Q 138 395 138 380 L 138 145 
                                         Q 138 130 120 110 L 100 90 Q 80 70 80 40" />
            <path class="track line3" d="M 240 350 L 166 350 Q 146 350 146 330 L 146 150 
                                         Q 146 130 166 125 S 186 120 186 100 L 186 40" />
            <path class="track line4" d="M 60 320 L 200 320 Q 220 320 220 300 L 220 150 
                                         Q 220 130 240 110 L 250 100" />

<circle class="station line1" cx="60" cy="400" data-type="asdf" />
            <circle class="station line1" cx="80" cy="160" data-type="asdf" />
            <circle class="station line1" cx="20" cy="160" />

<circle class="station line2" cx="165" cy="430" />
            <circle class="station line2" cx="80" cy="40" />
            <circle class="station big-station line2" cx="110" cy="100" />

<circle class="station line3" cx="240" cy="350" />
            <circle class="station line3" cx="186" cy="40" />
            <circle class="station line3" cx="186" cy="95" />

<circle class="station line4" cx="60" cy="320" />
            <circle class="station line4" cx="250" cy="100" />
            <circle class="station big-station line4" cx="220" cy="280" />

<rect class="junction line1 line2 line3 line4" x="123" y="313" />
            <rect class="junction line1 line2 line3" x="123" y="180" />

</svg>
    </div>

<div class="rela-block select-container">
        <div class="mover left"></div>
        <div class="mover right"></div>
        <div class="abs-center track-select ts0">All Lines</div>
        <div class="abs-center track-select ts1">Coastal Line</div>
        <div class="abs-center track-select ts2">Central Line</div>
        <div class="abs-center track-select ts3">North Line</div>
        <div class="abs-center track-select ts4">East Line</div>
    </div>

</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

Metro map with animation, 可用于地铁、高铁、公交路线规划图。

html5, metro, map

编辑器支持Emmet

快捷键

Metro map with animation, 可用于地铁、高铁、公交路线规划图。

html5, metro, map

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

HTML5 GSAP 在手机上展示地图位置的动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：