jQuery实现点击其中一张小图片，变成该图片放大版，其他排列的小图片则透明度降低

在jQuery中，可以使用`click()`事件以及CSS和JavaScript相结合的方式来实现这个效果。首先，假设你有几张图片分布在页面上，每张图片都是一个小图缩略图，可以这样做：

1. 给每个缩略图加上点击触发的`data-image`属性，存储放大图片的src地址，同时为其他图片添加初始的透明度设置：

<div class="thumbnail-container">
  <img src="thumbnail1.jpg" data-image="full-size1.jpg" alt="缩略图1" class="thumbnail">
  <img src="thumbnail2.jpg" data-image="full-size2.jpg" alt="缩略图2" class="thumbnail">
  <!-- 更多缩略图... -->
</div>

2. 写一段jQuery代码，当点击任一缩略图时，将其放大显示，其他缩略图变为半透明：

$(document).ready(function() {
  $('.thumbnail').click(function() {
    var $this = $(this); // 当前点击的元素
    var fullSizeImage = new Image();
    fullSizeImage.src = $this.data('image');

    // 将当前点击的图片设为大图显示，其他图片半透明
    $this.css({
      display: 'block',
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%', // 或者自适应宽度
      height: '100%' // 或者自适应高度
    });

    fullSizeImage.onload = function() {
      var containerWidth = $('.thumbnail-container').width();
      var imgWidth = this.width;
      var imgHeight = this.height;

      // 计算图片的展示位置，保证居中
      var leftOffset = (containerWidth - imgWidth) / 2;
      var topOffset = (containerHeight - imgHeight) / 2;

      $this.css({
        transform: 'translateX(-50%) translateY(-50%)', // 居中对齐
        opacity: 1 // 只有当前选中图片全透明
      });

      $('.thumbnail:not(:eq(' + ($this.index() + 1) + '))', '.thumbnail-container').each(function() {
        $(this).stop().animate({ opacity: 0.5 }, 300); // 其他图片淡入半透明
      });
    };
  });
});