代码之家  ›  专栏  ›  技术社区  ›  kabugh

如何使别针跟随地图?

  •  1
  • kabugh  · 技术社区  · 6 年前

    我有一张地图,上面有一些别针, position: absolute . 如何使所有设备的针响应?有没有办法让他们跟随他们的父母 div ?我试过用 media-queries 但是,这些别针要花很长时间才能定型。 这是一个 demo .

    HTML:

    <div class="map-wrapper">
      <div class="map"></div>
      <a class="rpin code-warszawa"></a>
      <a class="rpin code-gdansk"></a>
      <a class="rpin code-kalisz"></a>
      <a class="rpin code-kielce"></a>
      <a class="rpin code-konin"></a>
      <a class="rpin code-krakow"></a>
      <a class="rpin code-ostrow-wielkopolski"></a>
      <a class="rpin code-poznan"></a>
      <a class="rpin code-wroclaw"></a>
    </div>
    

    CSS:

      .map-wrapper {
        width: 50%;
        height: 60vh;
        margin: 0 auto;
        position: relative;
      }
      .map {
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        margin: 0 auto;
        background-image: url('https://s33.postimg.cc/v6fu8qirj/rst-map.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      .rpin {
        position: absolute;
        display: block;
        width: 30px;
        height: 40px;
        background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
        background-size: contain;
        transform: translateX(-50%) translateY(0);
        filter: brightness(1) contrast(1.1);
        transition: all .3s ease;
      }
      .rpin:hover {
        cursor: pointer;
        transform: translateX(-40%) scale(1.05);
      }
      .code-warszawa {
        bottom: 55.9282%;
        left: 65.5994%;
      }
      .code-gdansk {
        bottom: 89.858%;
        left: 45.716%;
      }
      .code-kalisz {
        bottom: 45.2392%;
        left: 39.4641%;
      }
      .code-kielce {
        bottom: 27.9065%;
        left: 62.2945%;
      }
      .code-konin {
        bottom: 53.4868%;
        left: 41.3139%;
      }
      .code-krakow {
        bottom: 14.1059%;
        left: 57.1113%;
      }
      .code-ostrow-wielkopolski {
        bottom: 43.573%;
        left: 36.9038%;
      }
      .code-poznan {
        bottom: 56.831%;
        left: 31.9521%;
      }
      .code-wroclaw {
        bottom: 33.6384%;
        left: 32.7036%;
      }
    
    2 回复  |  直到 6 年前
        1
  •  1
  •   Paulie_D    6 年前

    position:relative

    %

    Codepen Demo of below code

    .map {
      display: inline-block;
      margin: 1em auto;
      position: relative;
      border: 1px solid grey;
    }
    
    .map img {
      max-width: 100%;
      display: block;
    }
    
    .rpin {
      position: absolute;
      display: block;
      width: 5%;
      height: 5%;
      background: url('https://s33.postimg.cc/6d6a8b4yn/pin.png') no-repeat center center;
      background-size: contain;
      transform: translateX(-50%) translateY(0);
      filter: brightness(1) contrast(1.1);
      transition: all .3s ease;
    }
    
    .rpin:hover {
      cursor: pointer;
      transform: translateX(-40%) scale(1.05);
    }
    
    .code-warszawa {
      bottom: 55.9282%;
      left: 65.5994%;
    }
    
    .code-gdansk {
      bottom: 89.858%;
      left: 45.716%;
    }
    
    .code-kalisz {
      bottom: 45.2392%;
      left: 39.4641%;
    }
    
    .code-kielce {
      bottom: 27.9065%;
      left: 62.2945%;
    }
    
    .code-konin {
      bottom: 53.4868%;
      left: 41.3139%;
    }
    
    .code-krakow {
      bottom: 14.1059%;
      left: 57.1113%;
    }
    
    .code-ostrow-wielkopolski {
      bottom: 43.573%;
      left: 36.9038%;
    }
    
    .code-poznan {
      bottom: 56.831%;
      left: 31.9521%;
    }
    
    .code-wroclaw {
      bottom: 33.6384%;
      left: 32.7036%;
    }
    <div class="map"><img src="https://s33.postimg.cc/v6fu8qirj/rst-map.png" alt="">
      <a class="rpin code-warszawa"></a>
      <a class="rpin code-gdansk"></a>
      <a class="rpin code-kalisz"></a>
      <a class="rpin code-kielce"></a>
      <a class="rpin code-konin"></a>
      <a class="rpin code-krakow"></a>
      <a class="rpin code-ostrow-wielkopolski"></a>
      <a class="rpin code-poznan"></a>
      <a class="rpin code-wroclaw"></a>
    </div>

    Codepen Demo

        2
  •  1
  •   Syno    6 年前