ホームページ > 記事 > ウェブフロントエンド > HTML、CSS、jQuery を使用してレスポンシブな音楽プレイリストを作成する方法
HTML、CSS、jQuery を使用してレスポンシブな音楽プレイリストを作成する方法
- 王林オリジナル
- 2023-10-25 09:25:501105ブラウズ
HTML、CSS、jQuery を使用してレスポンシブな音楽プレイリストを作成する方法
現代社会において、音楽は人々の生活に欠かせないものとなっています。ユーザーがいつでもどこでもお気に入りの音楽を簡単に楽しめるようにするには、応答性の高い音楽プレイリストを作成することが非常に必要です。この記事では、HTML、CSS、jQueryを使用してレスポンシブデザインで音楽プレイリストを作成する方法と、詳細なコード例を紹介します。
ステップ 1: HTML 構造の設計
まず、音楽プレイリストを表示するための適切な HTML 構造を設計する必要があります。基本的な HTML 構造の例を次に示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式音乐播放列表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="playlist">
<ul class="list">
<li class="song">
<div class="song-info">
<div class="song-title">歌曲标题</div>
<div class="song-artist">歌手</div>
</div>
<div class="song-duration">时长</div>
</li>
<!-- 其他歌曲 -->
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html> 上記の HTML コードでは、音楽プレイリストを含む div コンテナを作成し、ul と # を使用します。 ##li 要素は、各曲に関する情報を表示する順序なしリストを作成します。各曲は song クラスを使用して識別され、曲のタイトル、アーティスト、再生時間などの情報は、内部の song-info および song-duration クラスを通じて表示されます。 . .
/* style.css */
.playlist {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.list {
list-style-type: none;
padding: 0;
}
.song {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
.song-info {
flex-grow: 1;
}
.song-title {
font-weight: bold;
}
.song-duration {
font-style: italic;
}
@media screen and (max-width: 480px) {
.song {
flex-direction: column;
align-items: flex-start;
}
} 上記の CSS コードでは、プレイリストの幅を 100%、最大幅を 600px に設定し、ページの中央に表示します。また、背景色の設定や枠線の追加など、各曲にいくつかのスタイルを追加しました。 メディア クエリでは、@media キーワードを使用して最大幅 480 ピクセルのメディア クエリを設定し、小さな画面デバイスでより優れた応答効果を表示します。
// script.js
$(document).ready(function() {
$('.song').click(function() {
// 在这里添加播放歌曲的代码
$(this).toggleClass('playing');
});
}); 上記の jQuery コードでは、$(document).ready() 関数を使用して、ドキュメントがロードされた後にこれが実行されるようにします。 . コードのスニペット。 .song 要素にクリック イベントを追加しました。ユーザーが曲をクリックすると、このイベントがトリガーされます。
toggleClass() 関数を使用して、クリック時に .playing クラスを切り替え、クリック時にスタイルを追加する効果を実現します。
以上がHTML、CSS、jQuery を使用してレスポンシブな音楽プレイリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。