skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」

｜ ｜ ｜ ｜ ｜ ｜ ｜

マウスオーバーした要素に変化を与えるのは多いですが、当該要素以外を透過させてみるとスポットライトがあたったようなエフェクトを与えられます。
via：Making a Cool Spotlight Effect with jQuery ? TutsValley

使用方法
jQueryからjquery.jsをダウンロードします。
<div class='spotlightWrapper'>
<ul>
<li><a href='#'><img src='画像1' /></a></li>
<li><a href='#'><img src='画像2' /></a></li>
<!-- 以下要素分 -->
</ul>
</div>

次にCSSを記述します。
<style type="text/css" media="screen">
.spotlightWrapper ul { list-style-type: none;margin:0px;padding:0px;}
.spotlightWrapper ul li { float:left; position:relative;}
.spotlightWrapper ul li a img { width:200px;position:relative;border:none;}
.spotlightWrapper ul li a img.active {border:4px solid black; z-index:1; left: -4px;top: -4px;}
</style>

そして最後にjsを記述すれば完成です。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function(){
var spotlight = {
// スポットライトの透明度を調整します
opacity : 0.2,
imgWidth : $('.spotlightWrapper ul li').find('img').width(),
imgHeight : $('.spotlightWrapper ul li').find('img').height()
};
$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });

// 該当画像にマウスオーバーした時
$('.spotlightWrapper ul li').hover(function(){
//imgをとってきてclassをactiveにし、opacityを1にする
$(this).find('img').addClass('active').css({ 'opacity' : 1});

//その他の画像の処理
$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;
},
//該当画像からマウスマウトしたとき
function(){
//つけたactiveを削除
$(this).find('img').removeClass('active');

});

//指定要素以外にマウスがあたったとき
$('.spotlightWrapper ul').bind('mouseleave',function(){
$(this).find('img').css('opacity', 1);
});

});
</script>

マウスオーバーした要素にスポットライトを当てるJavaScript「Making a Cool Spotlight Effect with jQuery」サンプル

記事作成：2009年11月17日

前の記事：Safariっぽい検索フォームを作るJavaScript「jQuery Safari Searcher」
次の記事：独自の右クリックメニューを導入できるJavaScript「a jQuery context menu plugin」