1

モバイル サイトのユーザーがアイコンのリストをスワイプ/スクロールできるようにしたいと考えています。

アイコンは、divタグを含むimgタグです。

ここに画像の説明を入力

ユーザーはコンテナをスワイプして、要素を左右にスクロール/スライドできる必要があります。

画像は加速と減速で滑らかにスライドする必要があります。

iOS と Android で動作する必要があります。

4

1 に答える 1

10

いつかこのようなものが必要だったので、その時にデモを作りました。それはかなり基本的なものですが、必要なすべての基礎作業を積み上げます. まず、マークアップから始めましょう:

マークアップ

質問のタグ セクションで jQM について言及したので、jQM[data-role=page]マークアップを使用します。次のような構造になります。

  <div data-role="page">
    <div data-role="header" data-theme="b">
      <h1>Slideshow</h1>
    </div>
    <div data-role="content">
      <div class="images">
        <!--your images here -->
      </div>
    </div>
  </div>

したがって、すべての画像を div に入れますclass=images。a画像の特定のグループは、次のようなタグ内にカプセル化されました。

<a href="#">
  <img src="25AC.jpg" />
</a>
<a href="#"> 
  <img src="nature.jpg" />
</a>
<!--so on-->

これを の中に入れdiv.imagesます。これが、私たちが持っているマークアップについてです。

CSS

スタイルシート部分はシンプルです。

.images {
    height : 280px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background-color : #272722;

}
.images a{
  padding : 14px 5px 0px 5px;
  margin: 5px 3px 0px 3px;
  vertical-align: middle;
  display: inline-block;
}

images img {
  max-width: 100%; 
  max-height:512px;
}

ここで注意すべき重要なプロパティ:

  1. プロパティ:前者overflow-xをoverflow-y有効にし、後者を無効にする必要があります。そうして初めて、右または左にスワイプしたときにスクロールが発生します。
  2. white-spaceプロパティ: これは、画像をまっすぐな水平レイアウトにするために重要です。
  3. max-widthプロパティ: これは、モバイルで画像をスケーリングするためのものです。

それでおしまい！これで完了です。

エクストラ

イベント処理を実演できるように、タップ時に画像を表示するポップアップを追加しました。ポップアップは次のとおりです。

<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="b" data-corners="false">
  <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <div id="stuff"></div>
</div>

周囲をクリックすると、画像が中div#stuffに入れられます。JS は次のとおりです。aimg

//pageinit event of page
$(document).on("pageinit", "[data-role=page]", function() {
  //cache popup for future use
  var $popup = $("#popupInfo");
  //click event for "a" tag inside .images
  $(this).on("click", ".images > a[href=#]", function(e) {
    //prevent default action
    e.preventDefault();
    //clone the image inside "a"
    var $img = $(this).find("img").clone();
    //add the cloned image inside #stuff
    $popup.find("#stuff").html($img);
    //open popup()
    $popup.popup().popup("open");
  });
});

デモとコード

jsbin.com のデモとコード

代替案

はるかに洗練された機能を提供する jQuery プラグインである swipejs を試すことができます。サイトへのリンクはこちらです。

于 2013-08-04T11:29:52.933 に答える