Question

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

谢谢！

Answer 1

消息来源： 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;
}

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

1 个答案: