根据页面内容在导航中的位置对窗口内外的页面内容进行动画处理.[在里面摆弄]

Animating page contents in and out of window based on their position in navigation. [Fiddle inside]

本文关键字：处理 动画 摆弄 在里面 位置 导航 窗口      更新时间：2023-09-26

我目前正在尝试实现到我的网站的"流"。我试图实现的是根据导航菜单中单击的按钮对页面内容进行动画处理。导航菜单是唯一一致的元素。菜单有3个按钮电话，家庭和邮件。目前，起始内容是"电话"页面的内容，但最终我需要将其切换到"主页"。现在的目标是将当前"页面"的内容容器动画化，并点击导航按钮的"页面"的内容。

棘手的部分是这个。当我从电话页面开始并单击主页按钮时，电话页面容器向左滑动，主页内容从右侧进入。这是所需的效果，因为电话位于主页的左侧。这在从"主页"转到"邮件"时也适当地工作。但是，当我想从邮件移动到主页时，我需要手机的内容向右滑动，而家庭的内容从左边滑入。同样，当从 1 远端到相反端时，我想滑过两者之间的内容。

更新 2

因此，对"我不知道是什么原因造成的"的修复是简单地将这一行移出currBoxX = destBoxX;与之后的比较中。我愚蠢到错过了。我已经实现了我想要的功能，但是当从一个页面转到中间页面到另一个页面时，我仍然不知道如何显示中间内容。这已经不重要了，因为Rick Hitchock已经向我展示了如何更有效地完成整个事情。所以如果你好奇，看看他的答案。

----

现在它在第一次运行时有效，也只有在我从一个菜单按钮转到下一个菜单按钮时才有效。问题是在第二轮中它开始从错误的地方移动容器，我不知道是什么原因造成的。要在工作中查看此内容，请转到小提琴，首先单击"主页"，然后单击"邮件"，然后单击"主页"，然后单击"电话"。到目前为止，这正是我想要的。现在单击主页，它将从错误的一侧进入。有什么想法吗？

更新的小提琴

我所做的是存储当前内容容器的值，并将其与目标容器的值进行比较。容器值从最左侧的 1 开始，最右侧的最高值为 3。因此，当我从电话 (1( 转到主页 (2( 时，目标值高于当前值，因此我知道按钮位于原始按钮的右侧，我称幻灯片为左侧动画。

在参数中使用当前容器的值调用函数 

<div class="nav_btn" onclick="goToBox(1,'#phone_box')">
            Phone</div>
        <div class="nav_btn" onclick="goToBox(2,'#home_box')">
            Home</div>
        <div class="nav_btn" onclick="goToBox(3,'#mail_box')">
            Mail</div>

比较当前容器和目标容器的值

if (destBoxX > currBoxX) {
        currBoxX = destBoxX;
        slideLeft();
    } 
    else {
        slideRight();
    }

更新结束

我

不是那么熟练，我真的在这里尽力了，但我真的迷失在动画中。我知道问题出在我通过 left 的属性对所有内容进行动画处理，但不幸的是，我不知道如何处理它以获得所需的功能。

因此，我想听听有关如何完成的任何提示/建议。另外，您是否认为我可以使用像当前这样的简单而通用的功能来做到这一点，或者我想要的太复杂了，我应该创建更多功能吗？

期待您的回复。

当前 JSFiddle 在这里

这是函数

function goToBox(boxid){
    $(".currentBox").animate({
        left: '-50%'
    }, 500, function() {
        $(".currentBox").css('left', '150%');
        $(".currentBox").appendTo('#container');     
    });
    $(".currentBox").removeClass("currentBox");
    $(boxid).addClass( "currentBox" );
    $(boxid).animate({
        left: '50%'
    }, 500);  
};

这就是我所说的

<nav>
    <div id="naw_wrap">
        <div class="nav_btn" onclick="goToBox('#phone_box')">Phone</div>
        <div class="nav_btn" onclick="goToBox('#home_box')">Home</div>
        <div class="nav_btn" onclick="goToBox('#mail_box')">Mail</div>
    </div>
</nav>

您可以直接滚动到该框，而不是跟踪所选框，如下所示：

function goToBox(boxid){
  $('body').animate({
    scrollLeft: $(boxid).offset().left
  }, 500);
};

您需要对 CSS 进行一些更改。

这会从窗口中删除滚动条：

body {
  ...
  overflow: hidden;
}

你有3个盒子，都是100%宽的。 因此，您的容器应为300%宽。 由于overflow: hidden已添加到正文中，因此容器上不再需要它：

#container {
  ...
  width: 300%;
}

您的盒子是 container 宽度的 1/3，因此它们需要 1/3 的宽度。 它们不再需要绝对定位，float: left会导致它们并排显示：

.box {
  ...
  width: 33.33%;
  height: 100%;
  float: left;
}

最后，naw_wrap需要固定的位置，以便在正文滚动时保持可见：

#naw_wrap{
  ...
  position: fixed;
}

小提琴

相关文章：