实现效果：
鼠标滑过效果
js代码：
<script type="text/javascript" src="js/jquery.js"></script> （在网上下载一个通用的）
<script type="text/javascript">
$(document).ready(function () {
$(‘#items .item’).each(function () {
title = $(this).attr(‘title’);
$(this).append(‘<span class="caption">’ + 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’);
});
});
/*]]>*/
</script>
css代码：
<style type="text/css">
body {
font-family:arial;
margin-top:70px;
}
img {border:none;}
div#items a {
text-decoration:none;
color:#3deeee;
}
div#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 {
box-shadow: 0 0 10px #444;
-moz-box-shadow: 0 0 10px #444;
-webkit-box-shadow: 0 0 10px #444;
}
</style>
实现代码：
<div id="items">
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/1.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/2.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/3.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/4.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/5.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/1.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/2.jpg" width="190" height="120"/></a>
<a class="item" href="#" title="Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.">
<img src="images/3.jpg" width="190" height="120"/></a>
</div>
，生气是拿别人做错的事来惩罚自己
