【前端】使用jQuery实现静态布局地铁线路地图和自动点亮站点-阿里云开发者社区

作者：小5聊基础
简介：一只喜欢全栈方向的程序员，欢迎咨询，尽绵薄之力答疑解惑
编程原则：Write Less Do More

参考目标图

本文章实现的静态布局图

主要知识点列表

编号	语言或插件	知识点	说明
1	CSS	position	位置属性，有相对定位、绝对定位和固定定位三种，同时配置left、right、top、bottom四个方向值使用
2	CSS	transform.rotate	转换属性，rotate，能够对元素进行旋转角度
3	CSS	border-radius	圆角属性，能够设置元素的圆角边框，当值和高宽度一致时，就是一个圆形边框
4	javascript	setInterval()	定时方法，js本身内置方法
5	jQuery	eq()	获取到指定索引下标的元素，对于多个class相同的元素，就可以使用eq方法获取某一个元素
6	jQuery	addClass()	给某个元素追加class样式值

1、jQuery版本

当前使用的版本：jquery-2.0.0.min.js

有些小伙伴在入门过程中，会有一定疑问，为什么要有一个版本，为什么不是同一个名字就行？

之所以会有版本的概念，是因为会出现这样的情况

1）封装的方法One，可能在新的版本里改为了First

2）封装的方法Second，可能在新版本里完善了功能

2、绘制路线

2.1 竖线条

效果图

代码

<style>
    .line {
        width: 10px;
        height: 80px;
    }
    .line-2 {
        background: #0066cc;
    }
</style>

<div class="line line-2"></div>

2.2 小圆圈

效果图

代码

<style>
    .circular {
        position: absolute;
        left: -5px;
        top: -5px;
        background: #fff;
        border: 4px solid #0066CC;
        width: 12px;
        height: 12px;
        border-radius: 14px;
        cursor: pointer;
    }

        .circular:hover {
            border: 4px solid #4398ed;
        }
</style>

<div class="circular" style="left: 0px;top: 0px;"></div>

2.3 组合效果

布局实现说明

1）最外面设置一个父级div，作为一个单元块

这个单元块的位置属性position设置为相对定位absolute，单元块相对于父级的top和left动态值

2）竖线条

直接在单元块设置固定高宽度div=80x10，并设置背景颜色=#0066cc

3）小圆圈

相对单元块进行定位，计算本身高宽度和线条高宽度，即可居中在定位显示

4）文本

同样相对于单元块定位，可以设置固定100px的宽度，然后文本text-align:right右对齐，并调整定位和小圆圈水平居中

5）旋转线条

样式使用transform，设置值rotate(45deg)，45deg=以线条本身中心点为参考点，旋转45度

部分代码

<style>
    body, html {
        margin: 0;
        padding: 0;
        font-size: 100%;
    }

    .item {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .line {
        width: 10px;
        height: 80px;
    }

    .line-end {
        height: 10px;
    }

    .line-transform {
        transform: rotate(45deg);
        -ms-transform: rotate(45deg); /* Internet Explorer */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
        -o-transform: rotate(45deg); /* Opera */
    }

    .line-2 {
        background: #0066cc;
    }

    .text {
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .circular {
        position: absolute;
        left: -5px;
        top: -5px;
        background: #fff;
        border: 4px solid #0066CC;
        width: 12px;
        height: 12px;
        border-radius: 14px;
        cursor: pointer;
    }

        .circular:hover {
            border: 4px solid #4398ed;
        }

        .circular .icon {
            width: 1.4rem;
            height: 1.4rem;
            vertical-align: middle;
            fill: #333;
            overflow: hidden;
            position: absolute;
            top: -5px;
            left: -5px;
            background: #fff;
            border-radius: 1.5rem;
        }

        .circular:hover .icon {
            fill: #4398ed !important;
        }
</style>

<div class="item" style="left: 224px;top: 1504px;">
    <div class="line line-2"></div>
    <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
        <span>会江</span>
    </div>
    <div class="circular" style="left: -4px;top: -6px;"></div>
</div>

2.4 点亮站点交互

此处使用的是定时器setInterval，每隔一秒切换到不同节点显示点亮class=light样式

效果图

本章地铁线路静态布局到此结束，下一篇文章，我们将实现动态站点显示和部分交互功能

3、完整的代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-size: 100%;
        }

        .item {
            position: absolute;
            left: 0px;
            top: 0px;
        }

        .line {
            width: 10px;
            height: 80px;
        }

        .line-end {
            height: 10px;
        }

        .line-transform {
            transform: rotate(45deg);
            -ms-transform: rotate(45deg); /* Internet Explorer */
            -moz-transform: rotate(45deg); /* Firefox */
            -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
            -o-transform: rotate(45deg); /* Opera */
        }

        .line-2 {
            background: #0066cc;
        }

        .text {
            position: absolute;
            right: 0px;
            top: 0px;
        }

        .circular {
            position: absolute;
            left: -5px;
            top: -5px;
            background: #fff;
            border: 4px solid #0066CC;
            width: 12px;
            height: 12px;
            border-radius: 14px;
            cursor: pointer;
        }

            .circular:hover {
                border: 4px solid #4398ed;
            }

            .circular .icon {
                width: 1.4rem;
                height: 1.4rem;
                vertical-align: middle;
                fill: #333;
                overflow: hidden;
                position: absolute;
                top: -5px;
                left: -5px;
                background: #fff;
                border-radius: 1.5rem;
            }

            .circular:hover .icon {
                fill: #4398ed !important;
            }

        .light {
            background: #aae298 !important;
            border: 4px solid #44ce3f !important;
        }

            .light .icon {
                display: none;
            }
    </style>
</head>
<body>
    <div style="position:fixed;top:10px;right:10px;">
        <div style="text-align:center;">
            <svg class="icon" style="width: 2rem;height: 2rem;vertical-align: middle;fill: #333;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2152"><path d="M255.329 231.83C212.739 142.273 153.359 65.132 77.148 0.386L267.84 0a686.133 686.133 0 0 1 149.188 218.117 685.707 685.707 0 0 1 56.011 267.446v538.418H321.49V525.925c0-103.384-22.06-201.422-66.18-294.096zM550.955 1024V485.583a685.688 685.688 0 0 1 55.991-267.466C642.466 135.883 692.183 63.177 756.154 0l190.693 0.387C870.616 65.133 811.235 142.274 768.665 231.83a677.418 677.418 0 0 0-66.16 294.077V1024h-151.55z" fill="#BE1120" p-id="2153"></path></svg>
            <br />
            <span>广州地铁</span>
        </div>
        <div style="text-align:center;">
            <span style="color:#0066cc;">二号线</span>
        </div>
    </div>
    <div style="position:relative;margin-top:50px;margin-left:100px;height:1800px;">
        <div class="item" style="left: 500px;top: 0px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>嘉禾望岗</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 450px;top: 50px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>黄边</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;"></div>
        </div>
        <div class="item" style="left: 400px;top: 100px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>江夏</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;"></div>
        </div>
        <div class="item" style="left: 350px;top: 150px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>萧岗</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;"></div>
        </div>
        <div class="item" style="left: 300px;top: 200px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>白云文化广场</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;"></div>
        </div>
        <div class="item" style="left: 250px;top: 250px;">
            <div class="line line-transform line-2"></div>
            <div class="text" style="width:100px;right: -8px;text-align:right;">
                <span>白云公园</span>
            </div>
            <div class="circular" style="left: 24px;top: 0px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 314px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>飞翔公园</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 384px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>三元里</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 464px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>广州火车站</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 544px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>越秀公园</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 624px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>纪念堂</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 704px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>公元前</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 784px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>海珠广场</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 864px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>市二宫</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 944px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>江南西</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1024px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>昌岗</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 1104px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>江泰路</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1184px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>东晓南</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1264px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>南洲</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 1344px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>洛溪</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1424px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>南浦</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1504px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>会江</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;"></div>
        </div>
        <div class="item" style="left: 224px;top: 1584px;">
            <div class="line line-2"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>石壁</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
        <div class="item" style="left: 224px;top: 1664px;">
            <div class="line line-2 line-end"></div>
            <div class="text" style="width:100px;right: 18px;text-align:right;top: -8px;">
                <span>广州南站</span>
            </div>
            <div class="circular" style="left: -4px;top: -6px;">
                <svg class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7696"><path d="M514.56 962.56C267.776 962.56 66.56 761.344 66.56 514.56S267.776 66.56 514.56 66.56 962.56 267.776 962.56 514.56 761.344 962.56 514.56 962.56z m0-834.56C301.568 128 128 301.568 128 514.56S301.568 901.12 514.56 901.12s386.56-173.568 386.56-386.56S727.552 128 514.56 128z" p-id="7697"></path><path d="M737.28 482.816H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7698"></path><path d="M615.936 293.376l141.312 141.312c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936 11.264-10.752 29.184-10.752 39.936 0zM311.808 555.008L453.12 696.32c10.752 10.752 10.752 28.672 0 39.936-10.752 10.752-28.672 10.752-39.936 0l-141.312-141.312c-10.752-10.752-10.752-28.672 0-39.936s28.672-11.264 39.936 0z" p-id="7699"></path><path d="M737.28 603.136H291.84c-15.36 0-28.16-12.8-28.16-28.16s12.8-28.16 28.16-28.16h445.44c15.36 0 28.16 12.8 28.16 28.16s-12.8 28.16-28.16 28.16z" p-id="7700"></path></svg>
            </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    $(function () {

        var length = $(".circular").length;
        var currentIndex = 0;
        setInterval(function () {

            $(".circular").removeClass("light");
            $(".circular").eq(currentIndex).addClass("light");

            currentIndex += 1;
            if (currentIndex >= length) currentIndex = 0;
        }, 1000);
    })
</script>

【前端】使用jQuery实现静态布局地铁线路地图和自动点亮站点

1、jQuery版本

2、绘制路线

2.1 竖线条

2.2 小圆圈

2.3 组合效果

2.4 点亮站点交互

3、完整的代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【前端】使用jQuery实现静态布局地铁线路地图和自动点亮站点

1、jQuery版本

2、绘制路线

2.1 竖线条

2.2 小圆圈

2.3 组合效果

2.4 点亮站点交互

3、完整的代码

热门文章

最新文章

相关课程

相关电子书

相关实验场景