純粋な 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 属性を使用して相対パスと絶対パスを指定する方法

推薦する

CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する

この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...

docker-maven-plugin の詳細な使用方法

目次Docker-Maven-プラグインMavenプラグインの自動デプロイメント手順1. ホストマシ...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

Linux 論理ボリューム管理 (LVM) の使用法の概要

ディスク領域の管理は、システム管理者にとって重要な日常的なタスクです。ディスク領域が使い果たされると...

Ubuntu の空き容量を増やす 5 つの簡単な方法

序文ほとんどの人は、システム ディスク ストレージが少ないときにこの操作を実行するか、Linux シ...

Centos7でglibcをアップグレードするとシステム異常(起動できない)になる場合の解決方法

目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...

MySQL マスタースレーブ同期における server-id の例の詳細な説明

序文MySQL クラスターを構築する場合、当然のことながら、データの一貫性を確保するために、データベ...

LinuxでMySQLのリモートアクセス権を有効にし、ファイアウォールでポート3306を開きます。

mysqlのリモートアクセス権を有効にするデフォルトでは、MySQL ユーザーにはリモート アクセ...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

HTML で複数のフォームのテキスト ボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...

Tomcat のメモリ構成の正しい姿勢についての簡単な説明

1. 背景多くのブログや記事を読みましたが、JVM のメモリ割り当て方法に関する包括的な記事は見つか...

MySQL で浮動小数点データを文字データに変換するときに起こりうる問題の詳細な説明

序文この記事は主に、MySQL で浮動小数点型を文字型に変換するときに発生する問題を紹介します。これ...