JQ实现简单的拼图效果

以下是使用jQuery实现简单的拼图效果的示例代码：

HTML代码：

<div id="puzzle">
  <div class="piece" id="piece1"></div>
  <div class="piece" id="piece2"></div>
  <div class="piece" id="piece3"></div>
  <div class="piece" id="piece4"></div>
  <div class="piece" id="piece5"></div>
  <div class="piece" id="piece6"></div>
  <div class="piece" id="piece7"></div>
  <div class="piece" id="piece8"></div>
  <div class="piece" id="piece9"></div>
</div>

CSS代码：

#puzzle {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}

.piece {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: 300px 300px;
  position: absolute;
}

#piece1 {
  top: 0;
  left: 0;
}

#piece2 {
  top: 0;
  left: 100px;
}

#piece3 {
  top: 0;
  left: 200px;
}

#piece4 {
  top: 100px;
  left: 0;
}

#piece5 {
  top: 100px;
  left: 100px;
}

#piece6 {
  top: 100px;
  left: 200px;
}

#piece7 {
  top: 200px;
  left: 0;
}

#piece8 {
  top: 200px;
  left: 100px;
}

#piece9 {
  top: 200px;
  left: 200px;
}

jQuery代码：

$(document).ready(function() {
  var emptyPiece = $('#piece9'); // 空白拼图块
  var pieces = $('.piece'); // 所有的拼图块
  
  // 随机打乱拼图块的位置
  pieces.sort(function() {
    return Math.random() - 0.5;
  });
  
  // 设置每个拼图块的位置
  pieces.each(function(index) {
    var piece = $(this);
    var top = Math.floor(index / 3) * 100;
    var left = (index % 3) * 100;
    piece.css({
      top: top + 'px',
      left: left + 'px'
    });
    
    // 点击拼图块时进行交换
    piece.click(function() {
      var currentTop = parseInt(piece.css('top'));
      var currentLeft = parseInt(piece.css('left'));
      
      // 判断是否与空白拼图块相邻
      if ((currentTop === emptyPiece.position().top && Math.abs(currentLeft - emptyPiece.position().left) === 100) ||
          (currentLeft === emptyPiece.position().left && Math.abs(currentTop - emptyPiece.position().top) === 100)) {
        var tempTop = piece.css('top');
        var tempLeft = piece.css('left');
        
        piece.css({
          top: emptyPiece.css('top'),
          left: emptyPiece.css('left')
        });
        
        emptyPiece.css({
          top: tempTop,
          left: tempLeft
        });
      }
    });
  });
});

在上面的示例代码中，我们首先定义了一个包含9个拼图块的容器，并使用CSS设置了每个拼图块的位置。然后在jQuery代码中，我们将所有的拼图块随机打乱位置，并为每个拼图块绑定了一个点击事件，在点击拼图块时进行交换。交换拼图块时，我们使用了jQuery的css()方法来修改每个拼图块的位置。