Html CSS导航栏动画

我刚刚开始我的电子文件夹，我放的第一个东西是导航栏。请记住，我绝对不是html或css方面的专家，首先我要说的是，我没有做这方面的原创。这个例子有很多不同，这就是为什么我在按照自己的想法制作时遇到了一些问题。无论如何，代码如下：

HTML

---

很抱歉这篇文章太长了，但这里是它给我带来的问题。宽度不正确。我想添加一个等式，其中图片的宽度是100%的页面除以页面的数量，但我不确定在哪里做。它在genral中似乎也有点像马车。如果将鼠标悬停在最后一页上，动画将闪烁。我相信有一个简单的解决办法，只是玩宽度或其他东西，但我似乎不能得到它。任何帮助都会收到。

原稿似乎设置为使用特定宽度（用于

.Navigation

）和特定数量的条目。 使用导航宽度的百分比几乎总是会导致一些问题

为了能够安全地添加其他条目，您必须将宽度设置回初始值

885px

，然后为每个附加条目添加

61px

另外两个条目的示例：

.Navigation {
    width: 1007px;
}

---

要支持您提供的代码中的13个条目，宽度必须为

1373px

，通过这几行，您可以计算每个li的宽度：

jQuery

$(document).ready(function(){
  var pics = $("li").size(); 
  var widthNav = $(window).width()/pics;
});

---

我希望这能帮你一点忙：）

Lucas方法的问题是，它没有考虑网站的自定义大小。因此，根据您想要提供的兼容性，您可以使用“calc”来获得您想要的确切大小

下面是我设置的代码，它甚至可以计算一个元素悬停时的大小，以便所有其他元素的大小都会更改：

.Navigation li {
    ...
    width: calc((100% / 13));
    box-sizing: border-box;
    float: left;
    ...
}
.Navigation ul:hover li {
    width: calc((100% - 640px) / 12);
}

当然，如果要添加或删除某些元素，则需要调整元素的数量

---

这里有一把小提琴，你可以看到它现在是如何工作的。=>

当你在一个img上悬停时，你想要这个等式吗。如果你只是在看它，它应该包含所有的图像而不离开页面。如果你把鼠标悬停在一个上面，我试过了，结果不起作用，但我做了这个计算。图像宽度=640px总图像=13悬浮图像宽度=640px未悬浮图像宽度=40px总容器宽度=640+40*12=1120px；（12，因为将有12个选项卡打开+1个图像）默认宽度=1120/13=86px；*/我这样做了，效果很好。不管怎样，谢谢你的帮助。那时你不再使用问题中提供的代码了。没有悬停的图片有60像素宽，加上1像素的边框。是的，在原图中是40像素，所以我用它作为参考。但是任何东西都可以替换，就像我现在有70px一样。谢谢你的帮助。这是我的uni电子文件夹，第一稿只能使用html和css。甚至连javascript都没有。不管怎样，我还是感谢你的帮助。好吧，照片的数量是静态的吗？你使用哪种浏览器？我个人使用chrome，但我想让我的电子文件夹与它们兼容，因为某些原因，这使得没有动画。它只是跳跃而不是滑动。它还切断了最后一页，我想调整一下宽度可以解决这个问题，你使用哪种浏览器和版本？有了Chrome和Firefox，动画对我来说很好。而且我总能看到所有的13个。

$(document).ready(function(){
  var pics = $("li").size(); 
  var widthNav = $(window).width()/pics;
});

.Navigation li {
    ...
    width: calc((100% / 13));
    box-sizing: border-box;
    float: left;
    ...
}
.Navigation ul:hover li {
    width: calc((100% - 640px) / 12);
}