HTML, CSS 및 jQuery를 사용하여 동적 페이지 로딩 진행률 표시줄을 만드는 방법

HTML, CSS 및 jQuery를 사용하여 동적 페이지 로딩 진행률 표시줄을 만드는 방법

웹 개발에서 페이지 로딩 진행률 표시줄은 사용자가 페이지 로딩 프로세스를 명확하게 이해하고 사용자 경험을 향상시킬 수 있는 일반적인 기능입니다. 경험. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 동적 페이지 로딩 진행률 표시줄을 만드는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. HTML 구조

먼저 HTML에서 진행률 표시줄을 표시하려면 컨테이너를 추가해야 합니다. 태그 시작 부분에 다음 코드를 추가합니다. 标签的最开始处，添加如下代码：

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>

其中，progress-bar-container 是容器的类名，用于设置进度条的位置和样式；progress-bar 则是进度条的类名，用于设置进度条的动画效果。

二、CSS样式

接下来，我们需要使用CSS来美化进度条。在 <style> 标签中，添加如下代码：

.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0;
  transition: width 0.3s ease;
}

这里我们设置了进度条容器的宽度为 100%，高度为 5px，并设置了背景颜色；进度条的高度为 100%，背景颜色为绿色，并设置了宽度为 0，使用 CSS 过渡效果，在宽度发生变化时有一个平滑的过渡动画。

三、jQuery代码

最后，我们使用jQuery来实现进度条的动态效果。在 <script> 标签中，添加如下代码：

$(window).on('load', function() {
  var progressBar = $('.progress-bar');
  var progressBarContainer = $('.progress-bar-container');
  var max = $(document).height() - $(window).height();
  var value = 0;

  progressBarContainer.slideDown(300);

  $(document).on('scroll', function() {
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  $(window).on('resize', function() {
    max = $(document).height() - $(window).height();
    var scrollTop = $(window).scrollTop();
    value = (scrollTop / max) * 100;
    progressBar.css('width', value + '%');
  });

  progressBarContainer.fadeOut(300);
});

上述代码首先获取了进度条和进度条容器的jQuery对象，然后计算了页面可以滚动的最大高度，并初始化进度条的值为0。

接着，通过监听 scroll 事件，实时获取当前滚动的位置，并将其转换为百分比形式来改变进度条的宽度。

同时，通过监听 resize 事件，当窗口大小发生变化时，重新计算页面可以滚动的最大高度，并更新进度条的宽度。

最后，进度条容器在页面加载完成后以淡出的方式消失。

四、使用方法

将上述代码添加到对应的位置后，保存文件为 .htmlrrreee

여기서 progress-bar-container는 컨테이너의 클래스 이름입니다. 진행률 표시줄 설정 위치 및 스타일 progress-bar는 진행률 표시줄의 클래스 이름으로 진행률 표시줄의 애니메이션 효과를 설정하는 데 사용됩니다.

2. CSS 스타일

다음으로 CSS를 사용하여 진행률 표시줄을 아름답게 만들어야 합니다. <style> 태그에 다음 코드를 추가합니다.

rrreee

여기에서는 진행률 표시줄 컨테이너의 너비를 100%, 높이를 5px로 설정하고 배경색을 설정합니다. 진행률 표시줄의 비율은 100%이고 배경색은 녹색이며 너비는 0으로 설정되어 있습니다. CSS 전환 효과를 사용하면 너비가 변경될 때 부드러운 전환 애니메이션이 나타납니다. 🎜🎜3. jQuery 코드🎜🎜마지막으로 jQuery를 사용하여 진행률 표시줄의 동적 효과를 구현합니다. <script> 태그에 다음 코드를 추가합니다. 🎜rrreee🎜위 코드는 먼저 진행률 표시줄 및 진행률 표시줄 컨테이너의 jQuery 개체를 가져온 다음 페이지가 스크롤할 수 있는 최대 높이를 계산합니다. , 진행률을 초기화합니다. 막대의 값은 0입니다. 🎜🎜다음으로, scroll 이벤트를 청취하여 현재 스크롤 위치를 실시간으로 획득하고 이를 백분율로 변환하여 진행률 표시줄의 너비를 변경합니다. 🎜🎜동시에 resize 이벤트를 수신하여 창 크기가 변경되면 페이지가 스크롤할 수 있는 최대 높이가 다시 계산되고 진행률 표시줄의 너비가 업데이트됩니다. 🎜🎜마지막으로 페이지가 로드된 후 진행률 표시줄 컨테이너가 페이드 아웃되어 사라집니다. 🎜🎜4. 사용방법 🎜🎜해당 위치에 위의 코드를 추가한 후 파일을 .html 형식으로 저장한 후 브라우저를 통해 파일을 열어보면 페이지의 동적 효과를 볼 수 있습니다. 로딩 진행률 표시줄. 🎜🎜요약🎜🎜이 문서에서는 HTML, CSS 및 jQuery를 사용하여 동적 페이지 로딩 진행률 표시줄을 만드는 방법을 소개합니다. HTML 구조를 추가하고, CSS 스타일을 설정하고, jQuery의 이벤트 수신 및 CSS 전환 효과를 결합함으로써 페이지 로딩 프로세스를 실시간으로 표시하고 사용자 경험을 향상시킬 수 있습니다. 🎜🎜이 기사가 도움이 되기를 바랍니다! 🎜

위 내용은 HTML, CSS 및 jQuery를 사용하여 동적 페이지 로딩 진행률 표시줄을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!