JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年05月 / 04月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>06月

アクセスランキング

[ジャンルランキング]
コンピュータ
413位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
58位
アクセスランキングを見る>>

スワイプ操作のスライド機能、DDScrollHandler

先日、ドラッグ&ドロップ操作を実現するためのライブラリDDHandlerを公開しましたが、そのコードを少し改造して、左右にスワイプ(フリック)をすることで操作ができるスライドのコンポーネント、DDScrollHandlerを作ってみました。

JS
jdbtools_DDScrollHandler.js

CSS
jdbtools_autoScrollComponent.css

ドラッグしている間はマウス操作に沿って動かし、離した瞬間に、元のページに戻るか、次のページに移るかを判定する、という仕組みで動いています。

GPUアクセラレーションなどもあるので、環境により、transition & transform , transition & left, setInterval & left の3パターンでアニメーションを行います。
基本的にCSSアニメーションで動くので他のJSで動かすライブラリよりは滑らかになるはず…

使い方

var handler = new DDScrollHandler();
handler.setAreaSize(要素の横幅[px], 要素の縦幅[px]);
handler.setScrollTarget(リストの親要素[element], リストの種類[String]);



使い道としては、チュートリアルやヘルプなど、利用者が気軽に読めると良いドキュメント等で使うと良さそうです。
実際に使う場合はページ数表示があったほうがよさそう。ちなみにそのためのsetOnPageChangedListenerというイベントも用意してあります。

まあいろいろと考えていこうと思います。
 


 
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。