マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」

マウスを当てたとこの画像だけくっきり見せたいという方にはこちら。
Gallery Focus jQuery experimentを利用するとマウスオーバーした周辺に対して適用されるので、幻想的かつ印象的な画像ギャラリーになりそうです。
マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」サンプル

使用方法
Gallery Focus jQuery experimentからファイル一式をダウンロード。
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery.galleryFocus.js"></script>
<script>
$(document).ready(function(){
$('img').galleryFocus({
'radius': 400, //フォーカスをあてる半径
'fadeTo': 0.1, //フェードの割合
'invert': false, //trueでマウスオーバーに対しぼかし
'overlay': true //overlayした範囲を表示
});
});
</script>

あとは画像を記述すれば完成です。
<img src="画像パス" />
以下画像分


マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」サンプル

sponsors

「マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」」をシェアする

記事作成:
記事URL:

TOP > > > マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」