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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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