javascript - 动画滚动 100%(水平)？

Question

在我的页面 (apolloedge.com/beta/port.html) 上，我有 2 个按钮:一个我想向左滚动 onclick 和一个我想向右滚动 onclick ，分别。容器元素的 ID 为 #header2。子元素有一个 .showc 类。此元素 (.showc) 的宽度为 100%。如何使用 JavaScript 和/或 jQuery 使按钮滚动 100%(动画)onclick？非常感谢您的帮助!

Answer 1

您可以使用 CSS3 transition 属性为图像容器设置动画，如下所示:

.showc {
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
  transition: all 0.6s ease-in-out; 
}

然后您的左向或右向 onclick 处理程序更改第一个 .showc 的 margin-left 值。