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

Posted 2023-02-24

【中文标题】重新渲染 HTML 元素定位在 Javascript 幻灯片动画内的窗口调整大小

【英文标题】：Re-render HTML elements positioning on window resize inside Javascript slide animation

【发布时间】：2014-03-18 04:28:31

【问题描述】：

我有以下网站 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 left 样式行，但它仍然无法正常工作。好像window.resize 什么都不做。

谢谢！

【问题讨论】：

你没有在窗口调整大小事件中调用动画函数...$(window).resize(function())

我已经包含了它，只是忘记在这里也包含它。还是谢谢

【参考方案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;
;

【参考方案2】：

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

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

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

function redrawDiv() 
  // do your math here

另一种解决方案：

将你的 content-wrap div 宽度的 css 更改为 980px，你已经有了 margin:0 auto；

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

【讨论】：

我很乐意这样做，只是我没有写这个 sn-p，我只是编辑它，因为我是一个 Jquery/javascript 新手。我试图这样做只是因为我不知道要包含 .css 左侧样式行的哪个变量。另外，不应该重新初始化变量吗？谢谢

我为你做了一个简单的例子。 jsbin.com/zoluraxo/1/edit - 如您所见，您只需将容器设置为固定宽度和边距：0 auto 并将 page-div 发送到左侧和顶部 0 位置

我不能给我的容器一个固定的宽度，因为我必须让页面从 100% 的浏览器窗口中滑入和滑出，而不仅仅是容器。所以它必须重新计算窗口调整大小的左侧距离，我试图实现它只是我不知道将它放在哪个变量中。我可以去 $(window).resize(function().css(left: viewsWidth + Math.max(0,((($(window).width() - 980)/2)))) 但是如果我在 animate 函数之外作为单独的函数进行操作，则看不到下一步该怎么做

我更新了我的示例，以便可以通过整个浏览器宽度查看动画（您可以使用初始左值）。如果您在任何函数之外设置它们，您可以访问您使用的变量。例如。变量测试；函数()test = 1;

非常感谢您的努力，但我不会更改我的脚本、标记或 CSS。此脚本已针对某些情况进行了调整，因此无法更改。