1

Есть 2 массива, нужно менять их местами, когда ширина экрана меняется. Так как я начинающий, я использовал элементарный if else сработал правда, но теперь оба массива работают (один задает marginleft другой marginright).
Помогите пожалуйста.

вот код

   var margin =["-150px","-140","-130px","-120px",
                "-110px","-100px","-90px","-80px",
                "-70px","-60px"];

   var marginScreen =["200px","190px","180px","170px",
                      "160px","150px","140px","130px",
                      "120px","110px","100px","90px"];

  var screen = document.documentElement.clientWidth;
  if (screen <= 1080) {
    margin = marginScreen; 
     withAp.style.marginLeft = marginScreen[nextOne]; //nextOne это переменная для массива которое тут не важен..
     withAp.style.opacityForLeft = opacityForLeft[nextOne];
  }

0

2 ответа 2

1

Создается отдельная переменная (marginSetCurrent), которая в зависимости от условий указывает на один из массивов. При этом сами массивы не модифицируются.

var marginSet1 = [-150, -140, -130, -120, -110, -100, -90, -80, -70, -60]
  , marginSet2 = [200, 190, 180, 170, 160, 150, 140, 130, 120, 110, 100, 90]
  , screen = document.documentElement.clientWidth
  , marginSetCurrent = screen <= 1080 ? marginSet2 : marginSet1;
withAp.style.marginLeft = marginSetCurrent[nextOne] + 'px';
1
  • а я не знал что можно так с запятыми писать .Спасибо большое за время потраченную и за обьяснения
    – Randall
    21 апр 2017 в 19:09
0

Чувак, если возможно, то лучше юзай медиа-запросы в css для установки нужных стилей под соответствующую ширину экрана. Например,

//установка маргина при ширине экрана больше 760px
@media (min-width: 760px){
 #withAp{
  margin: 0 auto;
 }
}

//установка маргина при ширине экрана меньше 760px
@media (max-width: 760px){
 #withAp{
  margin: 0 20px;
 }
}
1
  • тут при скролле картинка должна двигаться если пикселей больше 1080 то она начинает свою позицию с право если меньше то центра и двигается .Такое невозможно реализовать при помощи медиа-запросов.
    – Randall
    21 апр 2017 в 19:21

Ваш ответ

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

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