在窗口上重新呈现HTML元素定位在Javascript幻灯片动画中调整大小

我有以下网站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();
});

我甚至尝试在带有

window.resize

和

currentPage

的函数中添加css左样式行，但它仍然不起作用。这就好像

window.resize

没有任何作用

---

谢谢大家!

您可以使用jQuery的函数检测浏览器调整大小事件

所以每次调用事件时，您都需要进行计算

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

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

另一种解决方案：

将内容包装div宽度的css更改为

980px

，您已经拥有

边距：0 auto

---

在脚本中，您只需将

当前页面设置为
左：0
，而不是您的数学内容。
因此我设法将其修复。
在
a.showPage
之后，我包括了一个中心功能：
$（窗口）.resize（函数（）{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;
};

您没有在窗口调整大小事件上调用动画函数…$（window）.resize（function（）{}）我已经包括了它，只是忘了在这里也包括它。无论如何，谢谢你，我很想这么做，只是我没有写这段代码，我只是编辑了它，因为我是Jquery/Javascript的新手。我试图这样做只是因为我不知道哪一个变量应该包含.css左样式行。另外，变量不应该重新初始化吗？谢谢，我给你举了个简单的例子正如您所看到的，您所需要做的就是将容器设置为固定宽度和边距：0自动并将页面divs发送到左侧和顶部0位置我无法为容器设置固定宽度，因为我必须让页面从100%的浏览器窗口滑入和滑出，而不仅仅是容器。所以它必须在调整窗口大小时重新计算左距离，我试图实现它，但我不知道应该把它放在哪个变量上。我可以使用$（window）.resize（function（）{.css（{left:viewsWidth+Math.max（0，（$（window.width（）-980）/2））}），但是如果我在animate函数之外作为一个单独的函数来做，我就看不到下一步该怎么做了。我更新了我的示例，这样就可以在整个浏览器宽度中看到动画（您可以使用初始的左值）。如果在任何函数之外设置变量，则可以访问所使用的变量。例如var测试；函数（）{test=1}；非常感谢您的努力，但我不会更改我的脚本、标记或css。此脚本已经过修改，以涵盖某些情况，因此无法对其进行更改。