自动添加放大图标到缩略图

Question

我正在寻找添加居中放大镜图标到我的投资组合库。 像http://jquerystyle.com/gallery的效果一样。 我知道我可以用css在每个实例上做到这一点，但我想找到一种方法来自动执行此操作。任何jQuery插件，这样做？

谢谢！

Answer 1

DEMO：http://jsbin.com/useki4/4

来源：http://jsbin.com/useki4/4/edit

jQuery的一点点增加了做动画过渡：

$(function() { 
    $('.gallery li').hover(function() { 
     $(this).attr('class', 'current'); 
     $('.gallery li:not(.current)').stop().fadeTo(300, 0.25); 
    }, 
    function() { 
     $(this).removeClass('current'); 
     $('.gallery li').stop().fadeTo(150, 1.0); 
    }); 
});​ 

假设HTML

<ul class="gallery"> 
    <li> 
     <a href="#"> 
     <img src="" alt="" /> 
     <span class="magnifier"></span> 
     </a> 
    </li> 
</ul> 

CSS：

.gallery { 
    list-style: none; 
    width: 600px; 
    margin: 0 auto 
} 
.gallery li { 
    position: relative; 
    margin: 0; 
    overflow: hidden; 
    float: left; 
    display: inline; 
} 
.gallery li a { 
    text-decoration: none; 
    float: left; 
} 
.gallery li a img { 
    width: 150px; 
    height: 150px; 
    float: left; 
    margin: 0; 
    border: none; 
    padding: 10px; 
} 
.gallery li .magnifier { 
    width: 32px; 
    height: 32px; 
    background: transparent url(magnifier_zoom_in.png) no-repeat; 
    position: absolute; 
    right: 65px; 
    bottom: 65px; 
    font-size: 1.2em; 
    color: #fff; 
    padding: 0; 
} 
.gallery a:hover .magnifier { 
    background: transparent url(magnifier_zoom_out.png) no-repeat; 
}