紅穆ノート
レコメンド › 言語ノート › HTML+CSS+Swiperを用いたNetEase Cloud Musicのスマートフォン版における3列構成の左右スワイプ操作実現方法
言語ノート CSS JavaScript

HTML+CSS+Swiperを用いたNetEase Cloud Musicのスマートフォン版における3列構成の左右スワイプ操作実現方法

ブラウジング 193 📖 約 13 分
HTML+CSS+Swiperを用いたNetEase Cloud Musicのスマートフォン版における3列構成の左右スワイプ操作実現方法

20240108202621177-图片

まず、Swiperを用いて左右スワイプ操作を実現してください！

HTMLとCSSを用いて、テキストと画像のレイアウト表示を実現しましょう！

コード：

 隐藏内容：会员可查看
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Music demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">    
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>  

  <style>
    html,
    body {
      position: relative;
      height: 100%;
	  max-width:466px
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 16px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    body {
      background: #eee;
    }

    .swiper {
      width: 100%;
      height: 300px;
      margin: 20px 0;
    }
	.swiper-slide ul{
		height:300px;
		width:100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.swiper-slide ul li{
		height: 100px;
	}
	
	.musicLeft{
		width: 20%;
		float: left;
		height: 100%;
		background: #e6e7eb;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}  
	.musicRight{
		width: 80%;
		float: right;
		height: 100%;
		background: #e6e7eb;
		position: relative;
	}
	.musicBox{
		float: left;
		height: 100%;
		width: 100%;
	}
	.musicBox img{
		width:80px;
		height:80px;
		border-radius: 10px;
	}
	.musicRight h3 , p{
		text-align: left;
		padding: 0 0 0 20px;
	}
	.musicRight h3{
		margin: 0;
		padding: 0;
		position: absolute;
		top: 30%;
		transform: translate(10px,-50%);
		font-weight: unset;
		font-size: 18px;
	}
	.musicRight p{
		margin: 0;
		padding: 0;
		position: absolute;
		top: 60%;
		transform: translate(10px,-50%);
		color: #605c56;
	}
	.musicRight font{
		background: #edd2db;
		padding: 2px;
		font-size: 14px;
		border-radius: 6px;
		color: #c41d1d;
		margin-right: 6px;
	}
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<ul>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>如果当时</h3>
						<p><font>古风热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>素颜</h3>
						<p><font>流行热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>悬溺</h3>
						<p>葛东琪 </p>
					</div>
				</div>
			</li>
		</ul>
	  </div>
		<div class="swiper-slide">
		<ul>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>如果当时</h3>
						<p><font>古风热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>素颜</h3>
						<p><font>流行热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>悬溺</h3>
						<p>葛东琪 </p>
					</div>
				</div>
			</li>
		</ul>
	  </div>
    
	<div class="swiper-slide">
		<ul>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>如果当时</h3>
						<p><font>古风热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>素颜</h3>
						<p><font>流行热门榜第一名</font>许嵩</p>
					</div>
				</div>
			</li>
			<li>
				<div class="musicBox">
					<div class="musicLeft">
						<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
					</div>
					<div class="musicRight">
						<h3>悬溺</h3>
						<p>葛东琪 </p>
					</div>
				</div>
			</li>
		</ul>
	  </div>
      
    </div>
  </div>

</script>

  <script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
</body>

</html>

 

微信赞赏

WeChat

支付宝赞赏

Alipay

著作権表示 · 再配布は禁止されています

著者： 紅穆

本文のリンク： https://www.4s5.cn/jp/archives/1633.html

著作権に関する説明：本記事はオリジナル記事です。無断での転載、収集、ミラー化は一切禁止されています。違反した者には法的措置が講じられます。転載をご希望の場合は、出典を明記し、原文のリンクを保持してください。

✍️ クリエイター： 紅穆

ウェブサイト管理者 · ご覧いただきありがとうございます！さらに多くの魅力的なコンテンツをお楽しみいただけますよう、引き続きご支援をお願いいたします。

著者プロフィール プロフィールを見る →

関連記事

CSSの位置指定（position）

CSSの位置指定（position） 言語ノート CSS

構文：`position：static | relative | absolute | fixed | center | page | sticky`；デフォルト値：`static`；適用対象：`display` 属性が `table-column-group` または `table-column` に設定されていないすべての要素；継承性：なし；アニメーション：無…
👁 125

おすすめ読書

PHPのob関数の記録

PHPのob関数の記録 言語ノート PHP

以下の3つの関数（`ob_get_contents()`、`ob_end_clean()`、`ob_start()`）を用いることで、ローカルファイルのバッファリングやローカルスクリプトコードの実行を実現できます。`ob_start()`を用いて出力されるコードをバッファに保存すると、ページは即座に表示されません。その後、`ob_get_contents()`を呼び出してバッファに保存されたデータを取得します。
👁 153
PHPの unserialize関数

PHPの unserialize関数 言語ノート PHP

` unserialize()` 関数は、`serialize()` 関数によってシリアル化されたオブジェクトまたは配列を再シリアル化し、元のオブジェクト構造を返します。戻り値は変換後の値であり、`integer`、`float`、`string`、`array`、または `object` として返されます。入力された文字列が再シリアル化できない場合、`FALSE` を返し、`E_…` というエラーが発生します。
👁 176
PHPを使用して、ウェブページ上の2つの指定された文字列の間に存在する内容を抽出する。

PHPを使用して、ウェブページ上の2つの指定された文字列の間に存在する内容を抽出する。 言語ノート PHP PHPデータ収集

Webページから2つの指定された文字列の間に含まれる内容を抽出するには、以下の正規表現を使用できます：$pattern = '/string1(.*?)string2/is'；この正規表現はstring1とstring2の間に存在する内容をマッチングし、(.*?)でその内容をキャプチャします。以下に例コードを示します：// 目的のURLのHTMLコンテンツを取得…
👁 289
Baidu APIに接続する際、エラーが発生しました。エラーコード：redirect_uri_mismatch、エラーメッセージ：Invalid redirect uri

Baidu APIに接続する際、エラーが発生しました。エラーコード：redirect_uri_mismatch、エラーメッセージ：Invalid redirect uri 落とし穴のまとめ

このエラーは、Baidu APIを使用する際、認証用のコールバックURL（redirect_uri）がアプリケーション管理で設定したコールバックURLと一致していない場合に発生します。以下の点を確認してください：アプリケーション管理で設定したコールバックURLが、コード内で使用しているコールバックURLと一致しているかを確認してください。また、コールバックURLが正しく設定されているかを確認してください。コールバックURLは、アプリケーションの合法的なドメイン名またはIPアドレスである必要があります。…
👁 663
PHPを使用して、指定されたディレクトリ内のすべての指定された拡張子を持つファイルを検索します。

PHPを使用して、指定されたディレクトリ内のすべての指定された拡張子を持つファイルを検索します。 言語ノート PHP

指定されたディレクトリ内にあるすべての特定の拡張子を持つファイルを検索するには、rekursive関数を使用して、当該ディレクトリおよびそのすべてのサブディレクトリ内にある一致するファイルを検索できます。以下は、rekursive関数を用いて指定されたディレクトリ内にあるすべての特定の拡張子を持つファイルを検索する方法を示すサンプルコードです：<？php function find_files($dir, $extension) { $result = array…
👁 157
（スマートフォン向け適応型）pbootCMS対応の化粧・美容ウェブサイトテンプレート／レディースリップや化粧品関連ウェブサイト用ソースコードのダウンロード（2024年6月24日）

（スマートフォン向け適応型）pbootCMS対応の化粧・美容ウェブサイトテンプレート／レディースリップや化粧品関連ウェブサイト用ソースコードのダウンロード（2024年6月24日） 実用収集 pbootcmsテンプレート

レスポンシブ対応の化粧品・口紅・リップスパイス用PbootCMSウェブサイトテンプレートです。PCおよびWAP端末に対応しており、时尚感と洗練されたデザインにより、化粧品、スキンケア製品、化粧術のチュートリアルを効果的に紹介できます。このテンプレートは、化粧品ブランドがオンラインで女性消費者層を惹きつけ、ブランドイメージを向上させるのに役立ちます。テンプレート表示・インストール手順：ウェブサイト管理コンソール：/admin.php｜ユーザー名：admin｜パスワード：admin｜解凍用パスワード：www.4s…
👁 54