ビフォーとアフターをバーでスライドして切り替えるスクリプトをCatch My Fameから紹介します。
jQuery Before/After Plugin
demo
※「before」と「after」の表示は付け加えたものです。
デモでは、画像にカーソルを重ねると分割するバーが表示され、左右にドラッグすることで画像のビフォーとアフターが表示されます。
バーを右にドラッグして、ビフォーを表示
バーを左にドラッグして、アフターを表示
ビフォーとアフターの二つの画像はdiv要素で配置しているだけなので、スクリプトオフ時には成り行きで画像が配置されます。
beforeafter.jsはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Post on:2009年7月16日
