在 Javascript 幻灯片动画中重新渲染窗口大小调整位置的 HTML 元素

Question

我有以下网站 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什么都不做一样。

谢谢！

Answer 1

所以我设法修复了它。在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;
};

Answer 2

您可以使用

jQuery的.resize()函数检测浏览器大小调整事件。

因此，每次调用事件时都需要进行数学运算。

$(window).resize(function() {
   redrawDiv();
});
function redrawDiv() {
  // do your math here
}

另一种解决方案：

将内容包装div宽度的CSS更改为980px，您已经有margin:0 auto;

在脚本中，您只需要将current page设置为left:0而不是数学内容。