HTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成する-jsチュートリアル-php.cn

HTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成する

王林

リリース： 2023-10-27 10:00:52

オリジナル

1512 人が閲覧しました

HTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成する

HTML、CSS、および jQuery: アニメーション効果を備えた読み込み進行状況バーを作成する

読み込み進行状況バーは、一般的な Web ページの読み込み効果であり、ユーザーが明確に確認できるようにします。ユーザーエクスペリエンスを向上させるために、現在のページの読み込みの進行状況を確認します。この記事では、HTML、CSS、jQuery を使用してアニメーション効果のある読み込み進行状況バーを作成し、具体的なコード例を示します。

HTML 構造

まず、HTML の基本構造を作成します。進行状況バーを含むコンテナ要素が必要で、その中に進行状況を表示する要素を追加します。

<!DOCTYPE html>
<html>
<head>
  <title>加载进度条</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="progress-container">
    <div class="progress-bar"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

CSS スタイル

次に、進行状況バーを美しくするための CSS スタイルシートを作成する必要があります。疑似要素を使用して、プログレスバーにアニメーション効果を作成します。

body {
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  background-color: #ddd;
}

.progress-bar {
  width: 0%;
  height: 20px;
  background-color: #4CAF50;
  animation: progress-animation 2s linear;
}

/* 创建进度条动画 */
@keyframes progress-animation {
  0% { width: 0%; }
  100% { width: 100%; }
}

ログイン後にコピー

jQuery コード

最後に、jQuery を使用して進行状況バーの読み込み効果を制御する必要があります。 animate() メソッドを使用して、指定された時間内で進行状況バーの幅を変更します。

$(document).ready(function(){
  // 定义进度条的目标宽度（根据需要自行修改）
  var targetWidth = 80;

  // 获取进度条元素
  var progressBar = $(".progress-bar");

  // 使用animate()方法来改变进度条的宽度
  progressBar.animate({
    width: targetWidth + "%"
  }, 2000);
});

ログイン後にコピー

上記のコードでは、ページが読み込まれた後、animate() メソッドを使用して、進行状況バーの幅を 0% から指定されたターゲット幅まで徐々に増やします (ここではは 80%)、プロセスには 2 秒かかります。

上記のコードを script.js ファイルとして保存し、CSS スタイルを style.css ファイルとして保存し、HTML ファイルと同じディレクトリに配置します。。

HTML ファイルを開いてブラウザでページをプレビューすると、アニメーション付きの読み込み進行状況バーが表示されます。

要約すると、HTML、CSS、jQuery を使用して、アニメーション効果のある読み込み進行状況バーを作成することができました。これらの基本知識を習得することで、Web ページでより豊かなインタラクティブな効果を実現し、ユーザーエクスペリエンスを向上させることができます。この記事がお役に立てば幸いです!

以上がHTML、CSS、jQuery: アニメーション化された読み込み進行状況バーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。