iOSのフォトビューワのような動きを実装するfrick-image.js

カテゴリ:Javascript関連 2011年7月11日 09:34

JavaScriptライブラリ作りました

久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。

まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系(iOS、Android含む)のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。

iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつの要素(*B)を用意し、以下のようにスクリプトを実行すればOKです。指定するのは、コンテナではなく、Bの方の要素のID(やクラス)を渡します。指定方法はjQueryで指定できる方法で指定することができます。

JavaScript

HTML

ダウンロード

この記事のカテゴリー一覧を見る⇒Javascript関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/195