相对布局:
.list-group li .item {
margin-right: 16px;
margin-bottom: 20px;
position: relative;
margin-top: 10px;
}
阴影:
.hotshadow{
box-shadow: 5px 5px 5px #ccc;
z-index: 10;
}
html:
<ul class="list-group">
#foreach($!sample in $!model)
<li class="width-5-4">
<a class="item" href="$!sample.linkUrl" target="_blank" title="$!sample.title">
![]($!sample.imageUrl)
</a>
</li>
#end
</ul>
js:
<script type="text/javascript">
$(function(){
$('.list-group li').mouseover(function(){
$(this).find('.item').stop().animate({'top':'-20px'});
$(this).find('.item').addClass('hotshadow');
});
$('.list-group li').mouseout(function(){
$(this).find('.item').stop().animate({'top':'0'});
$(this).find('.item').removeClass('hotshadow');
});
</script>
效果图: