0

Flickr と同様の機能を持つモバイル用の画像ギャラリーを作成したいと考えています。

指が動く方向に応じてタッチムーブで画像を動かしたいのですが、小さなスワイプジェスチャを行うと、画像をずっと移動したり、スワイプしていない場合は移動したりしたいと思います十分な大きさになったら、div を x 軸の開始位置に戻します。

ロジックがどのようになるかはわかっていますが、使用する構文がわかりません。

私はそれが次のようなものになると思います：

タッチスタート時 - タッチスタートの x 位置に変数を割り当てます

on touchmove - touchmove の x 位置に変数を割り当てます - touchmove から touchstart を引いた変数を割り当てます - div の現在の x 位置に (touchmove から touchstart を差し引いたもの) を追加します

タッチエンド時 - touchmove => touchstart + 50px の場合、1000px - (touchmove-touchstart) を div の x 位置に追加します

-else if touchmove =< touchstart - 50px then - 1000px + (touchmove - touchstart) div x 位置から

Else マイナス (touchmove - touchstart) div の x 位置から

誰かこれをjavascriptに翻訳できますか?

4

1 に答える 1

1

あなたが本当に挑戦しているのなら、考慮すべきことがたくさんあります。プラットフォームに依存しないようにし、JavaScript、CSS3アニメーション、またはその両方でアニメーション化するかどうかを決定する必要があります。レスポンシブであり、オンデマンドなどで画像をロードできるようにする必要があります。下位互換性についてはどうでしょうか。

また、タッチスタートとタッチムーブの間の距離だけでなく、これが行われた速度も検出する巧妙なロジックで作業する必要があります。たとえば、ユーザーは指を非常に速くフリックしてトランジションを発生させたり、指を非常にゆっくりと長距離移動させてトランジションを発生させなかったりすることができます（制限内）。

だからあなたの質問に答えるために、これはそれ自体でアニメートするだけではありません。巧妙で効率的なJavaScriptまたはCSS3アニメーションがないと、スムーズに移動しません。

これを行うには、すでに存在する多くのJQueryライブラリの1つを使用することをお勧めします。うまく機能する無料のライブラリがたくさんあります。簡単に検索した後、私はこれを見つけました：

http://www.photoswipe.com/、これはあなたが達成しようとしていることを正確に実行しているようです。

于 2013-03-14T00:45:21.933 に答える