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

使用方法

<div class='spotlightWrapper'>
	<ul>
		<li><a href='#'><img src='画像1' /></a></li>
		<li><a href='#'><img src='画像2' /></a></li>
		<!-- 以下要素分 -->
	</ul>
</div>

<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>

<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>

サンプル