javascript 材料设计如何在网页中使用同级转换(标签栏中的水平滚动效果)

ha5z0ras 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(90)

早上好，我正试图创建一个材质设计滚动过渡效果（兄弟过渡）作为图像和下面的链接：

正文
我已经设法复制标签，但滚动效果不发生时，标签是改变，有人能帮助吗？非常感谢提前
'

<div class="mdc-tab-bar" role="tablist">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content">
        <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">One</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">Two</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab mdc-tab" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__text-label">Three</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="content content--active">
  <p>Content one</p></div>
<div class="content">
  <p>Content two</p>
</div>
<div class="content">
  <p>Content three</p>
</div>

'
'

.content {
  display: none;
}

.content--active {
  display: block;
}

'
代码编号：text
我已经设法复制了选项卡，但是当选项卡更改时不会出现滚动效果，

JavaScript

来源：https://stackoverflow.com/questions/74908071/material-design-how-to-use-the-sibling-transitions-in-web-horizontal-scroll-eff

1条答案

按热度按时间

6kkfgxo01#

相当简单但复杂。一个大容器，里面有所有的元素和一个flex列
中央支助系统

.main{
      display: felx;
      flex-direction: column;
      position : absolute;
      top : 0;
      left : calc((100% / 2) - ((100% / 3)/2)); /* replace 3 with number of sections required */
}

   section{
      height : 90%; /* leaving 10% for the nav bar */
      width : 100vw;
      /* all must be the same size and if there is a gap, the gap must be subtracted using this method calc((100% / 2) - ((((100% - <gap size * number of gapes) / number of sections))/2)) */
}

超文本标记语言

<main>
   <section id="sec--1" onclick="moveSection(this)"></section>
   <section id="sec--2" onclick="moveSection(this)"></section>
   <section id="sec--3" onclick="moveSection(this)"></section>
</main>

现在一切都准备好了javascript
任何处于活动模式的元素都应该在中间，所以我们要改变css中calc（）函数的参数，也就是说，使用id和str.slice（）;方法在javascript中你可以将它切片并连接到int，这样你就可以使用下面的方法：

function moveSection(e){
  let active panel = e.id.slice(-1);
  let main = document.getElementsByTagName('main')[0]);
  // change main styling to the right equation
}

解决逻辑是正确的，但不要复制我的代码，不会工作，它是失踪了很多优化。如果你仍然需要进一步的更多帮助，我是可用的。

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 材料设计如何在网页中使用同级转换(标签栏中的水平滚动效果)

1条答案

相关问题

热门标签

最新问答