> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 탭 콘텐츠를 컨테이너로 제한하면서 손가락 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

JavaScript를 사용하여 탭 콘텐츠를 컨테이너로 제한하면서 손가락 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?

WBOY
풀어 주다: 2023-10-20 11:31:48
원래의
897명이 탐색했습니다.

如何使用 JavaScript 实现选项卡内容的手指滑动切换效果同时限制在容器内?

JavaScript를 사용하여 탭 콘텐츠를 컨테이너로 제한하면서 손가락 슬라이딩 전환 효과를 구현하는 방법은 무엇입니까?

탭은 동일한 영역에 다양한 콘텐츠를 표시하도록 전환할 수 있는 일반적인 웹 페이지 레이아웃입니다. 전통적인 클릭 전환 방식과 비교하여 손가락 슬라이딩 전환 효과는 모바일 장치에서 더 친숙하고 직관적입니다. 이 기사에서는 JavaScript를 사용하여 탭 콘텐츠의 손가락 슬라이딩 전환 효과를 구현하고 이를 컨테이너로 제한하는 방법을 소개합니다.

먼저 탭 콘텐츠를 호스팅하려면 HTML 구조가 필요합니다. 탭에 세 개의 레이블이 있고 각 레이블이 콘텐츠 영역에 해당하며 HTML 구조는 다음과 같습니다.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="container">

  <div class="tabs">

    <div class="tab" id="tab1">标签1</div>

    <div class="tab" id="tab2">标签2</div>

    <div class="tab" id="tab3">标签3</div>

  </div>

  <div class="content">

    <div class="panel" id="panel1">内容1</div>

    <div class="panel" id="panel2">内容2</div>

    <div class="panel" id="panel3">内容3</div>

  </div>

</div>

로그인 후 복사

위 코드에서 .tabs는 탭 레이블 .content는 탭 콘텐츠를 전달하는 데 사용되며 .tab.panel은 특정 탭 레이블 및 콘텐츠입니다. .tabs 是用来承载选项卡标签,.content 是用来承载选项卡内容,.tab.panel 是具体的选项卡标签和内容。

接下来,我们需要使用 CSS 来设置选项卡容器的样式,包括容器大小、选项卡标签的样式和内容区域的样式。为了实现手指滑动效果,我们还需要使用 overflow: hidden 来隐藏超出容器范围的内容。CSS 样式可以如下所示:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.container {

  width: 300px;

  height: 200px;

  overflow: hidden;

}

 

.tabs {

  display: flex;

}

 

.tab {

  flex: 1;

  text-align: center;

}

 

.content {

  width: 300%;

  display: flex;

}

 

.panel {

  flex: 1;

  text-align: center;

}

로그인 후 복사

接下来,我们可以使用 JavaScript 来实现手指滑动切换效果以及限制在容器内。我们使用 touchstarttouchmovetouchend 事件来监听手指的滑动操作。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

const container = document.querySelector('.container');

const tabs = document.querySelectorAll('.tab');

const panels = document.querySelectorAll('.panel');

 

let startX = 0;

let currentX = 0;

 

container.addEventListener('touchstart', (event) => {

  startX = event.touches[0].clientX;

});

 

container.addEventListener('touchmove', (event) => {

  event.preventDefault();

  currentX = event.touches[0].clientX;

});

 

container.addEventListener('touchend', () => {

  const deltaX = currentX - startX;

  const threshold = container.offsetWidth / 3;

 

  if (deltaX > threshold && currentIndex > 0) {

    currentIndex--;

  } else if (deltaX < -threshold && currentIndex < tabs.length - 1) {

    currentIndex++;

  }

 

  const translateX = -currentIndex * 100;

 

  tabs.forEach((tab) => tab.classList.remove('active'));

  panels.forEach((panel) => panel.classList.remove('active'));

 

  tabs[currentIndex].classList.add('active');

  panels[currentIndex].classList.add('active');

 

  container.querySelector('.content').style.transform = `translateX(${translateX}%)`;

});

로그인 후 복사

在上述代码中,我们首先通过 querySelector 方法选择 DOM 元素,然后使用变量 startXcurrentX 来记录手指滑动时的起始和当前横坐标。在 touchstart 事件中,我们通过 event.touches[0].clientX 获取手指开始滑动时的横坐标。在 touchmove 事件中,我们通过 event.touches[0].clientX 获取手指当前的横坐标,并使用 preventDefault() 方法取消默认滑动事件。在 touchend 事件中,我们计算了手指滑动的水平偏移量 deltaX,并根据 threshold 的阈值来判断是否需要切换选项卡。最后,我们通过操作选项卡样式和内容区域的 transform 属性来切换到正确的选项卡和内容。

完整的示例代码可以参考以下链接:
[https://codepen.io/](https://codepen.io/)

综上所述,我们可以使用 JavaScript 实现选项卡内容的手指滑动切换效果,并限制在容器内。通过监听 touchstarttouchmovetouchend

다음으로 CSS를 사용하여 컨테이너 크기, 탭 레이블 스타일, 콘텐츠 영역 스타일을 포함하여 탭 컨테이너의 스타일을 지정해야 합니다. 손가락으로 미끄러지는 효과를 얻으려면 overflow:hidden을 사용하여 컨테이너 범위를 벗어나는 콘텐츠를 숨겨야 합니다. CSS 스타일은 다음과 같습니다: 🎜rrreee🎜 다음으로 JavaScript를 사용하여 손가락 슬라이드 전환 효과를 구현하고 이를 컨테이너로 제한할 수 있습니다. touchstart, touchmovetouchend 이벤트를 사용하여 손가락 슬라이딩 작업을 수신합니다. 🎜rrreee🎜위 코드에서는 먼저 querySelector 메서드를 통해 DOM 요소를 선택한 다음 startXcurrentX 변수를 사용하여 기록합니다. 슬라이딩 시 손가락의 움직임 시작 및 현재 가로좌표. touchstart 이벤트에서는 손가락이 미끄러지기 시작할 때 가로 좌표를 얻기 위해 event.touches[0].clientX를 사용합니다. touchmove 이벤트에서는 event.touches[0].clientX를 통해 손가락의 현재 가로좌표를 얻고 preventDefault()를 사용하여 취소합니다. 메소드 기본 슬라이딩 이벤트. touchend 이벤트에서는 손가락 슬라이드 deltaX의 수평 오프셋을 계산하고 threshold의 임계값에 따라 탭 전환 여부를 결정합니다. 마지막으로 탭 스타일과 콘텐츠 영역의 transform 속성을 ​​조작하여 올바른 탭과 콘텐츠로 전환합니다. 🎜🎜전체 샘플 코드는 다음 링크를 참조하세요.
[https://codepen.io/](https://codepen.io/)🎜🎜요약하면 JavaScript를 사용하여 탭 콘텐츠를 구현할 수 있습니다. 손가락 스와이프는 효과를 전환하며 컨테이너로 제한됩니다. touchstart, touchmovetouchend 이벤트를 수신하여 손가락 슬라이딩으로 탭 전환 기능을 구현하고 컨테이너 내 슬라이딩을 제한할 수 있습니다. CSS 스타일을 통해 내부. 이러한 유형의 상호 작용은 모바일 장치에서 더욱 친숙하고 직관적이어서 사용자 경험을 향상시킵니다. 🎜

위 내용은 JavaScript를 사용하여 탭 콘텐츠를 컨테이너로 제한하면서 손가락 슬라이딩 전환 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿