[分享]css两个图片上下交换

CSS 两个图片上下交换的实现方式有很多，其中一种常用方法如下：

.container{
  display: flex; /*使用flex布局*/
  flex-direction: column; /*设置为垂直排列*/
}
.image1{
  order: 2; /*图片1在容器内的显示顺序为2*/
}
.image2{
  order: 1; /*图片2在容器内的显示顺序为1*/
} 

以上代码中，我们使用了flex布局，然后通过设置图片在容器中的顺序来实现上下交换。可以根据实际需求调整图片的顺序。

另外，如果需要图片可以响应用户的交互操作，比如鼠标点击或滑动触摸等，可以使用JavaScript实现交互逻辑。

let image1 = document.querySelector('.image1');
let image2 = document.querySelector('.image2');
let container = document.querySelector('.container');
let isSwapping = false; /*防止重复触发*/

function swap(){
  if(isSwapping){
    return; 
  }
  isSwapping = true;

  setTimeout(function(){
    container.insertBefore(image1, image2.nextSibling);
    isSwapping = false;
  }, 500);
  
}

image1.addEventListener('click', swap);
image2.addEventListener('click', swap); 

以上是一个简单的交互逻辑实现代码。当任意一个图片被点击时，会触发swap函数，在500毫秒内将图片1插入到图片2的后面，从而实现图片的上下交换。isSwapping变量用于防止用户快速重复点击图片导致插入顺序混乱。