3

Есть блок div.mapCollectives с position:relative и вложенный список ul.collectives>li.

<div class="mapCollectives">
        <img src="img/map.png" alt="">
            <ul class="collectives">
                <li>
                  <a href="#" class="decorItemText">
                    <p>Декоративно-прикладное творчество</p>
                  </a>
                </li>
                <li>
                  <a href="#" class="decorItemText">
                    <p>Этнографический фольклорный</p>
                  </a>
                </li>
            </ul>
        </div>

У каждой li задано position:absolute. Через JS, при изменении размера окна браузера, каждому li присваивается новый transform:scale

$(window).resize(function(){
    var ww = $('.mapCollectives').width()*0.0008630;//Специальные коэффициенты 
    var hh = $('.mapCollectives').height()*0.0014545;//для расчёта пропорций li
    $('.collectives li').css({
        'transform': 'scale('+ww+', '+hh+')'
    });
});

Проблема в том, что у li заданы в стилях left и top, и при уменьшении окна эти значения тоже должны изменяться, чтобы li сохраняло своё месторасположение (.mapCollectives>img - карта с островами, а li - указатели на конкретные острова).

Уменьшается блок .mapCollectives - уменьшается картинка внутри. Уменьшаются указатели (должны указывать на "правильные" острова, то-есть left и top должны уменьшаться).

Пробовал задавать left и top в процентах, но не помогло. Пробовал transform(ww*N, hh*M), тоже не помогло. Думаю, тут должна быть какая-то хитрая формула расчёт координат li в зависимости от размеров родительского окна.

Вся суть в двух скринах:

Указатель указывает на конкретную координату введите сюда описание изображения

Меняем размер экрана и указатель сдвигается

введите сюда описание изображения

Размеры самого указателя меняются пропорционально экрану, но сам блок съезжает вниз и вправо, а нужно, чтобы он указывал на тот же самый остров, что и на первом скрине

Обновление

http://codepen.io/anon/pen/EPmdvO

$(document).ready(function() {
  $(window).resize(function() {
    var ww = $('.mapCollectives').width() * 0.0008630;
    var hh = $('.mapCollectives').height() * 0.0014545;
    console.log(ww);
    console.log(hh);
    sscale = $('.mapCollectives').width() / 1976;
    $('.collectives li').css({
      'transform': 'scale(' + ww + ', ' + hh + ')',
      'top': ((212 - (300 * sscale)) * -5) / 8,
      'left': ((95 - (220 * sscale)) * -1) / 0.7
    });


  });
  $(window).resize();
});
main.container img {
  padding: 0;
}
.mapCollectives {
  max-width: 100%;
  max-height: 100%;
  position: relative;
}
.container img {
  max-width: 100%;
}
.collectives li {
  outline: 1px solid;
  width: 221px;
  text-align: center;
  height: 253px;
  position: absolute;
}
.collectives li:first-child {
  background: url(http://5.firepic.org/5/images/2016-01/09/5p09s5ue4l0w.png) no-repeat center 8px, url(http://5.firepic.org/5/images/2016-01/09/zxmx6oq31mqu.png) no-repeat center;
  left: 55px;
  top: -19px;
}
.decorItemText {
  position: relative;
  height: 100%;
  display: block;
}
.decorItemText p {
  position: absolute;
  bottom: 9px;
  font: bold 15px/16px RobotoCondensed;
  color: #FFF;
}
@media (min-width: 1770px) {
  .col-lg-8 {
    width: 65.8%;
  }
}
@media (min-width: 1430px) {
  main.container {
    width: 67.2%;
  }
}
@media (max-width: 1200px) {
  main.container {
    padding: 0px 14px;
    width: 100%;
  }
}
}
@media (min-width: 1200px) {
  .col-lg-8 {
    width: 59.2%;
  }
}
}
@media (min-width: 992px) and (max-width: 1200px) {
  .col-md-9 {
    width:75% !important;
  }
}
<main class="container col-lg-8 col-md-9 col-sm-12">
  <div class="mapCollectives">
    <img src="http://5.firepic.org/5/images/2016-01/09/2owys8ofkcby.png" alt="">
    <ul class="collectives">
      <li>
        <a href="#" class="decorItemText">
          <p>Декоративно-прикладное творчество
          </p>
        </a>
      </li>
    </ul>
  </div>
</main>

2
  • Сделайте пож. песочницу. (тут/jsfiddle/jsbin/codepen)
    – olegatro
    Commented 9 янв. 2016 в 6:04
  • Я пока делаю пример, но у меня возникла проблема при очень маленьких разрешениях, поэтому хотел бы уточнить, насколько сильно будет уменьшаться карта? Если бы не текст под маркером, можно было бы вообще обойтись без scale, либо сделать текст как изображение.
    – olegatro
    Commented 11 янв. 2016 в 10:34

2 ответа 2

1

Проблема решена!

Есть волшебная формула для расчёта top и left

$('.collectives > li:first-child').css({
        'top': ((205-(300*sscale))*-5)/8,
  'left': ((80-(210*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(2)').css({
        'top': ((205-(500*sscale))*-5)/8,
  'left': ((80-(395*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(3)').css({
        'top': ((205-(300*sscale))*-5)/8,
  'left': ((80-(780*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(4)').css({
        'top': ((205-(470*sscale))*-5)/8,
  'left': ((80-(1260*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(5)').css({
        'top': ((205-(1200*sscale))*-5)/8,
  'left': ((80-(270*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(6)').css({
        'top': ((205-(950*sscale))*-5)/8,
  'left': ((80-(620*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(7)').css({
        'top': ((205-(1210*sscale))*-5)/8,
  'left': ((80-(910*sscale))*-1)/0.73
    });
    $('.collectives > li:nth-child(8)').css({
        'top': ((205-(1200*sscale))*-5)/8,
  'left': ((80-(1215*sscale))*-1)/0.73
    });

1215 в последнем случае отвечает за смещение элемента, -1, 80 и 0.73 - за изменение размеров при ресайзе элемента. Подобрал коэффициенты вручную, так что по честному - не понимаю, как работает эта формула

1
  • Жестоко конечно, но задача сама по себе не простая, без костылей тут не обойтись.
    – olegatro
    Commented 12 янв. 2016 в 18:11
0

можно изначально просчитать для каждого li top и left в процентах, записать эти проценты, как атрибуты в li:

<li attrtop="12%" attrleft="10%">

и при ресайзе, брать для каждого li:

$("li").each(function(){
  var top = $(this).attr("attrtop"); 
  var top = $(this).attr("attrleft"); 
  $(this).css("top",top+"%"); 
  $(this).css("left",left+"%");
});

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.