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