HTML, CSS, jQuery를 사용하여 동적 타임라인을 만드는 방법-JS 튜토리얼-php.cn

HTML, CSS, jQuery를 사용하여 동적 타임라인을 만드는 방법

WBOY

풀어 주다： 2023-10-24 09:31:58

원래의

802명이 탐색했습니다.

HTML, CSS, jQuery를 사용하여 동적 타임라인을 만드는 방법

HTML, CSS 및 jQuery를 사용하여 동적 타임라인을 만드는 방법에는 구체적인 코드 예제가 필요합니다.

타임라인은 연대순 순서와 이벤트 흐름을 표시하는 일반적인 방법이며 역사적 이벤트 및 프로젝트 진행 상황을 표시하는 데 매우 적합합니다. 기다리다. HTML, CSS 및 jQuery 기술을 사용하면 동적 타임라인 효과를 쉽게 만들 수 있습니다. 이 기사에서는 이러한 기술을 사용하여 간단한 타임라인 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저 HTML로 기본 타임라인 구조를 만들어야 합니다. 다음은 코드 예입니다.

<!DOCTYPE html>
<html>
<head>
    <title>动态时间轴</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="timeline">
        <div class="timeline-items">
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件1</h2>
                    <p>事件1的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件2</h2>
                    <p>事件2的详细描述</p>
                </div>
            </div>
            <div class="timeline-item">
                <div class="timeline-item-content">
                    <h2>事件3</h2>
                    <p>事件3的详细描述</p>
                </div>
            </div>
        </div>
        <div class="timeline-progress"></div>
    </div>
</body>
</html>

로그인 후 복사

위의 HTML 코드에서 .timeline-items 컨테이너와 를 포함하는 <code>.timeline 컨테이너를 만들었습니다. .timeline-progress진행률 표시줄. .timeline-items 컨테이너는 타임라인에 이벤트를 배치하는 데 사용됩니다. 각 이벤트는 .timeline-item으로 표시되며 이벤트의 세부정보는 에 배치됩니다. >.timeline- item-content컨테이너. .timeline容器，里面包含了一个.timeline-items容器和一个.timeline-progress进度条。.timeline-items容器用来放置时间轴上的事件，每个事件用.timeline-item表示，事件的详细内容放在.timeline-item-content容器中。

接下来，我们使用CSS样式来美化时间轴的外观。以下是代码示例：

.timeline {
  position: relative;
  margin: 50px auto;
  width: 800px;
}

.timeline-items {
  position: relative;
}

.timeline-item {
  position: relative;
  margin-bottom: 50px;
  padding: 20px;
  background: #f1f1f1;
}

.timeline-item-content {
  display: inline-block;
  vertical-align: top;
}

.timeline-progress {
  position: absolute;
  width: 4px;
  background: #666;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

로그인 후 복사

上面的CSS代码中，我们设置了.timeline容器的基本样式，并美化了.timeline-item和.timeline-progress

다음으로 CSS 스타일을 사용하여 타임라인의 모양을 아름답게 만듭니다. 다음은 코드 예시입니다.

$(document).ready(function() {
  var timelineItems = $(".timeline-items .timeline-item");
  var progress = $(".timeline-progress");

  // 设置进度条的初始位置
  progress.css("height", timelineItems.length * 100);

  // 监听滚动事件，更新进度条位置
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var windowHeight = $(this).height();
    var documentHeight = $(document).height();
    var timelineOffset = $(".timeline").offset().top;

    var progressHeight = windowHeight * ((scrollTop - timelineOffset) / (documentHeight - windowHeight));

    progress.css("top", scrollTop - timelineOffset);
    progress.css("height", progressHeight);
  });
});

로그인 후 복사

위 CSS 코드에서는 .timeline 컨테이너의 기본 스타일을 설정하고 .timeline-item 및 를 아름답게 꾸몄습니다. . 타임라인 진행 모습.

마지막으로 jQuery를 사용하여 타임라인을 동적으로 만듭니다. 다음은 코드 예입니다.

rrreee

위의 JavaScript 코드에서는 jQuery 라이브러리를 사용하여 동적 효과를 얻었습니다. 구체적으로 스크롤 이벤트를 수신하고 스크롤 거리와 페이지 높이를 기반으로 진행률 표시줄의 위치를 계산하고 진행률 표시줄의 높이를 실시간으로 업데이트했습니다. 🎜🎜위의 HTML, CSS 및 jQuery 코드를 사용하여 동적 타임라인 효과를 성공적으로 구현했습니다. 타임라인을 실제 애플리케이션과 더욱 일관되게 만들기 위해 필요에 따라 스타일과 이벤트 콘텐츠를 수정할 수 있습니다. 이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 HTML, CSS, jQuery를 사용하여 동적 타임라인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!