画像にマウスオーバーするとキランと光ったような効果が出せるのが、jQueryプラグイン「jQuery Gloss」です。
クリスマスのムードのこの時期。トップ画像やバナー画像などで、ちょっと目を引くこの効果を利用すると良いのではないでしょうか？
サンプルはこちら
→ カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」サンプル
ファイルのサイズも２ｋ程度で軽く、設置も簡単に出来ます。
【使用方法】
まずは、jQuery Glossからファイル一式をダウンロードします。
<head>部にJavaScriptを設定します。
|
1 2 3 4 5 6 7 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="gloss.1.0.js" type="text/javascript"></script> <script> $(document).ready(function(){ $.gloss(); }); </script> |
そして以下のように<body>部の好きなところに画像を設定するだけです。
|
1 2 3 |
<div class="gloss" style="width:画像の幅px;height:画像の高さpx;"> <img src="画像のパス" /> </div> |
サンプルのソースを記述しておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<html> <head> <title>カーソルをのせるとキランと画像を光らせるQueryプラグイン「jQuery Gloss」サンプル</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="gloss.1.0.js" type="text/javascript"></script> <script> $(document).ready(function(){ $.gloss(); }); </script> </head> <body> <h1>カーソルをのせるとキランと画像を光らせるjQueryプラグイン「jQuery Gloss」サンプル</h1> <div class="gloss" style="width:750px;height:400px;"> <img src="img1.jpg" /> </div> </body> </html> |
あわせてお読みください
ZooMove ZooMoveは、マウスオーバーで画像を拡大させてみせることができるjQueryプラグインです。 画像を一部を詳細に見せたいときなどに効果的。こ…
Slider Pro 「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像を…
spritespin jQuery plugin ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては３６０度全方向から商品のイ…
コメントを残す