iPhone,Android,PCで使えるフリック操作が実現できるjQuery Plugin
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
README.md
index.html
index2.html
yuidoc.json

README.md

jquery.flick

iPhone,Android,PCで使えるフリック操作が実現できるjQuery Plugin

仕様

  1. IEに対応(IE6〜)
  2. フリックエリア クリック時、フリックした場合には「縦方向のスクロールストップ」。
  3. 普通に縦方向にスクロールした場合には「フリックの操作をストップ」する。
  4. フリックした時、フリックエリアの頭までスクロールする。
  5. 初回の「フリックコンテンツの位置」を指定する。
  6. アドレスに「フリックコンテンツ位置のID(ハッシュ)」を指定することにで、そのコンテンツへ移動する。
  7. タイマーで時間が来ると次のコンテンツへ移動する。

使い方

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flick.js"></script>
<script type="text/javascript">
	$("#flick").flick();
</script>

オプション

  • contentNum : 0 スタートが何番目から始まるか
  • centerPosition : true or false フリック操作をした時にコンテンツの位置までスクロールするか
  • speed: 200 フリック操作を話した時のスピード(pcの場合) transitionが使えるブラウザの場合には cssで指定した値が有効(transition: transform .2s ease-out;)
  • timer: false コンテンツをタイマーで回すか(回す場合は時間を指定、回さない場合はfalse)

初期設定

contentNum: 0,
centerPosition: true,
speed: 200,
timer: false

必須なCSS

div.container {
	overflow: hidden;
}
div.itemBox {
	position: relative;
}
div.container .item {
	float: left;
}
.moving {
	-webkit-transition: -webkit-transform .2s ease-out;
	-moz-transition: -moz-transform .2s ease-out;
	-o-transition: -o-transform .2s ease-out;
	-ms-transition: -ms-transform .2s ease-out;
}

付与するclass

  • セレクトされているflickNavのクラスは「selected」
  • 「next」「prev」の次or前のコンテンツがない場合のクラスは「end」

補足

  • IE6で使用する場合は、「container」に幅をいれるようにしてください。
  • PCサイトで使う場合で、コンテンツの中にimgが入ってる場合には、フリック時に画像をドラックしてしまいます。imgに「pointer-events: none;」 を入れるとドラックされないようになります。

ライセンス