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
    9 янв 2016 в 6:04
  • Я пока делаю пример, но у меня возникла проблема при очень маленьких разрешениях, поэтому хотел бы уточнить, насколько сильно будет уменьшаться карта? Если бы не текст под маркером, можно было бы вообще обойтись без scale, либо сделать текст как изображение.
    – olegatro
    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
    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+"%");
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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