六
7
2010
简单的JQuery聚光灯效果教程
发布者: seasun这个教程将引导大家如何建立一个简单的聚光灯效果。我们用相对简单理解的方法，希望你能喜欢。
这就是最终的效果图
1.HTML
这里我们使用DIV＋IMG来表现我们的表格。以缩略图的标题来为JQuery设置锚点。
2.CSS
css是非常简单的。如果你使用的图像大小不同的话，你可能要调整一下标题字幕的位置。同时我们这里还有一点点CSS3的应用，对图像加了阴影，所 以当你鼠标停留在图片上方就会出现（记住IE是不支持的）。
body {
font-family:arial;
margin-top:70px;
}
img {border:none;}
#items a {
text-decoration:none;
color:#3deeee;
}
#items {
width:786px;
margin:0 auto;
}
#items .item {
display:block;
width:190px;
height:120px;
border:2px solid #666;
float:left;
position:relative;
}
#items .item .caption {
position:absolute;
top:80px;
left:2px;
padding:3px;
font-size:10px;
width:180px;
display:none;
background:#000;
}
.clear {
clear:both;
}
.effect {
/* CSS3 shadow */
box-shadow: 0 0 10px #444;
-moz-box-shadow: 0 0 10px #444;
-webkit-box-shadow: 0 0 10px #444;
}
3.javascript
好吧，其实这里的JavaScript还是很简单的。工作原理：当我们鼠标停留在一个items中的item上时，就为其的兄弟结点加上CSS，使 它们的透明度为0.1，然后为其加上阴影，并显示它的标题。当我们的鼠标离开items，一切都被重置为默认。
$(document).ready(function () {
//loop through all the children in #items
//save title value to a span and then remove the value of the title to avoid tooltips
$(‘#items .item’).each(function () {
title = $(this).attr(‘title’);
$(this).append(‘<span>’ + title + ‘</span>’);
$(this).attr(‘title’,”);
});
$(‘#items .item’).hover(
function () {
//set the opacity of all siblings
$(this).siblings().css({‘opacity’: ’0.1′});
//set the opacity of current item to full, and add the effect class
$(this).css({‘opacity’: ’1.0′}).addClass(‘effect’);
//show the caption
$(this).children(‘.caption’).show();
},
function () {
//hide the caption
$(this).children(‘.caption’).hide();
}
);
$(‘#items’).mouseleave(function () {
//reset all the opacity to full and remove effect class
$(this).children().fadeTo(’100′, ’1.0′).removeClass(‘effect’);
});
});
4.结论
这一个相当简单的教程，我认为这一个很不错的办法来表现到这个效果。如果有什么疑问或指教可以给我发表评论。
- 分享
