純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。

wxml

ループ画像の最初と最後がつながるように、画像を含むボックスのコピーをもう1つ作成します。

<view class="scrollbox dis-flex">
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </ビュー>
    <view class="imgItem dis-flex" style="animation: {{computedAni}};">
      <image src="../img/{{index + 1}}.jpg" wx:for="{{images}}" mode="aspectFill" wx:key="index"></image>
    </ビュー>
</ビュー>

wxss

.dis-flex {
  ディスプレイ: フレックス;
  ディスプレイ: -webkit-flex;
}
.スクロールボックス{
  マージン: 30px;
  テキスト配置: 中央;
  境界線: 1px 青
  高さ: 220rpx;
  アイテムの位置を中央揃えにします。
  オーバーフロー: 非表示;
}
.imgアイテム{
  アニメーション: 24 秒の rowup 線形無限通常;
}
.imgItem 画像 {
  幅: 200rpx;
  高さ: 200rpx;
  マージン: 0 20rpx;
}
@keyframes 行アップ {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      変換: translate3d(0, 0, 0);
  }
  100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      変換: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes rowup {
  0% {
      -webkit-transform: translate3d(0, 0, 0);
      変換: translate3d(0, 0, 0);
  }
  100% {
    変換: translate3d(-1000px, 0, 0);
    変換: translate3d(-1000px, 0, 0);
  }
}

js

速度を調整する鍵は、ループされるアイテムの数によってアニメーション時間が動的に制御されることです。

ページ({
  データ: {
    画像: 新しい配列(4)、
    計算されたアニ: ''
  },
  onLoad: 関数 () {
    this.setAniSpeed(this.data.images.length)
  },
  setAniSpeed(数値) {
    let time = Math.ceil(num / 5 * 15) // ここでは、画像が 5 枚ある場合のアニメーション時間は 15 秒です。自分で調整できます this.setData({
      computedAni: `${time}s rowup 線形無限通常`
    })
  }
})

コードスニペットを表示するにはここをクリックしてください

https://developers.weixin.qq.com/s/4gGngEm67Zlh

純粋な CSS3 で水平無限スクロールを実装するサンプルコードに関するこの記事はこれで終わりです。CSS3 水平無限スクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Docker を使用して開発環境を構築する方法 (Windows および Mac)

>>:  HTML a タグの href 属性を使用して相対パスと絶対パスを指定する方法

推薦する

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...

mysql8.0.18 で winx64 をインストールするための詳細なチュートリアル (画像とテキスト付き)

MySQLデータベースをダウンロードするには、https://dev.mysql.com/down...

CentOS8 ネットワークカード設定ファイル

1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...

Ubuntu 19 以下に Android Studio をインストールするチュートリアル

過去の経験から言うと、タスクを完了した後にメモを取るのは良い習慣です。インストール環境はUbuntu...

MySQL監視ツールmysql-monitorの詳細な説明

1. 概要mysql-monitor MYSQL 監視ツール、最適化ツール、1 つの Java Sp...

Dockerを使用してSpringBootプロジェクトをデプロイする方法

Docker テクノロジの開発により、マイクロサービスの実装にさらに便利な環境が提供されます。Doc...

Linux の高並列性とパフォーマンス最適化の落とし穴の紹介

目次序文Linux アプリケーション実行中に開いているファイルが多すぎる問題の分析と解決Linux ...

データベース接続のURLの詳細な説明と概要

データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...

React ページ ターナーの実装 (フロント エンドとバックエンドを含む)

目次フロントエンド上記のアイデアに従って、ページめくり機能を設計して記述します。バックエンド(Jav...

React における setState の同期または非同期の問題の理解

目次1. setState は同期的ですか?非同期ですか? 2. 非同期的に動作する1. React...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...