jquery - 自动为缩略图添加放大图标

Question

我想在我的投资组合画廊中添加居中放大镜图标。喜欢http://jquerystyle.com/gallery的效果.我知道我可以在每个实例中使用 css 执行此操作，但我想找到一种自动执行此操作的方法。任何执行此操作的 jquery 插件？

谢谢!

Answer 1

演示: 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;
}