Повторно визуализировать расположение HTML-элементов при изменении размера окна в анимации слайдов Javascript

0

У меня есть следующий веб-сайт wixwebsite.seobrasov.com, где у меня есть сценарий Jquery, который анимирует страницы, чтобы вставлять их и выдвигаться. У меня есть формула для вычисления позиционирования центра в зависимости от окна браузера:

left: Math.max(0,(($(window).width() - 980)/2))

где 980 - моя ширина div.

Однако при изменении размера окна div остаются в старой позиции и только перестраиваются при обновлении.

То, что я пытаюсь сделать, - это переориентировать активную страницу на изменение размера окна. Я уже пытался включить функцию в документ, готовый с изменением размера окна, но это не работает. Вот мой код скрипта:

function animate() {
   var currentPageI = -1;
   var pages = [
    $('div.dhome'),
    $('div.dabout'),
    $('div.dcontact'),
    $('div.dportraits'),
    $('div.dpregnancy'),
    $('div.dbabies-newborn'),
    $('div.dbabies-3-6'),
    $('div.dbabies-6-24'),
    $('div.dkids'),
    $('div.dfamily'),
    $('div.dall-about-me'),
    $('div.dcouples'),
    $('div.dpets'),
    $('div.dthe-experience'),
    $('div.dfinishing-touches'),
    $('div.dthank-you'),
    ];

    var viewsWidth = 1300; 
    var showPage = function(index){

    if(index === currentPageI){return;}

    var currentPage = pages[currentPageI];
    if(currentPage){
        currentPage.stop().animate({left: -viewsWidth})
    }

    var nextPage = pages[index];

    nextPage
        .stop()
        .css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
        .animate({left: Math.max(0,(($(window).width() - 980)/2))})
    currentPageI = index;
  }

  // show default page
  showPage(0);

  $('a.dhome').click(showPage.bind(null, 0));
  $('a.dabout').click(showPage.bind(null, 1));
  $('a.dcontact').click(showPage.bind(null, 2));
  $('a.dportraits').click(showPage.bind(null, 3));
  $('a.dpregnancy').click(showPage.bind(null, 4));
  $('a.dbabies-newborn').click(showPage.bind(null, 5));
  $('a.dbabies-3-6').click(showPage.bind(null, 6));
  $('a.dbabies-6-24').click(showPage.bind(null, 7));
  $('a.dkids').click(showPage.bind(null, 8));
  $('a.dfamily').click(showPage.bind(null, 9));
  $('a.dall-about-me').click(showPage.bind(null, 10));
  $('a.dcouples').click(showPage.bind(null, 11));
  $('a.dpets').click(showPage.bind(null, 12));
  $('a.dthe-experience').click(showPage.bind(null, 13));
  $('a.dfinishing-touches').click(showPage.bind(null, 14));
  $('.submit').click(showPage.bind(null, 15));
  $('a.dthank-you').click(showPage.bind(null, 16));

  $('.content-wrap').mouseover(function(){
    $('.slider').stop().animate({
        right: 0
    }, 50000);                        
  }).mouseout(function(){
    $('.slider').stop().animate({
        right: '-1300px'    
    }, 50000);     
  });
};

$(document).ready(function () {
    animate();
});
$(window).resize(function(){
    animate();
});

Я даже пытался добавить CSS оставил строку стиля внутри функции с window.resize и на currentPage, но он по- прежнему не работает. Как будто window.resize ничего не делает.

Спасибо!

  • 0
    Вы не вызвали функцию animate для события изменения размера окна ... $ (window) .resize (function () {})
  • 0
    Я включил его, только что забыл включить его и здесь. Спасибо, в любом случае

2 ответа

0
Лучший ответ

Поэтому мне удалось исправить это. После a.showPage я включил функцию центра: $(window).resize(function(){center()});

который работает следующим образом, и теперь он настраивается на изменение размера браузера:

    var center = function(index){
    if(index === currentPageI){return;}
    var currPage = pages[currentPageI];
    if(currPage){
    currPage
        .stop()
        .css({left: viewsWidth + Math.max(0,(($(window).width() -    980)/2))})
        .animate({left: Math.max(0,(($(window).width() - 980)/2))})
    }
    var nextPage2 = pages[index];
    nextPage2
        .stop()
        .css({left: viewsWidth + Math.max(0,(($(window).width() - 980)/2))})
        .animate({left: Math.max(0,(($(window).width() - 980)/2))})
    currentPageI = index;
};
0

Вы можете определить событие изменения размера браузера с .resize() функции jQuery .resize().

Поэтому вам нужно будет делать математику каждый раз, когда вызывается событие.

$(window).resize(function() {
   redrawDiv();
});

function redrawDiv() {
  // do your math here
}

Другое решение:

измените css вашей ширины div-содержимого на 980px, у вас уже есть margin:0 auto;

и в скрипте вам нужно только установить current page left:0 вместо вашего математического материала.

  • 0
    Я хотел бы сделать это только потому, что я не написал этот фрагмент, я просто отредактировал его, поскольку я новичок в Jquery / Javascript. Я попытался сделать это только потому, что не знаю, для какой из переменных включить строку стиля .css. Кроме того, не следует ли повторно инициализировать переменные? Спасибо
  • 0
    Я сделал быстрый пример для вас. jsbin.com/zoluraxo/1/edit. Как видите, все, что вам нужно сделать, это установить для контейнера фиксированную ширину и поле: 0 auto и отправить div-страницы в левую и верхнюю 0 позиции.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню