CSS流式布局与JS数组运用（图像归位案例）-CSDN博客

本文链接：https://blog.csdn.net/woosm/article/details/131591266

流式布局避免重复操作

定义数组避免数据互串，将上一个事件数据导入下一个事件数据发生定位偏差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  /*笔记：*/
  /*操控单个元素，布局方式：子元素绝对定位，父元素相对定位*/
  /*所有子元素，left和top都是相对父元素的左上顶点，*/
  /*因此每个子元素的left和top的初始值都不一样*/
  /*批量操控：*/
  /*父元素流式布局flex，子元素相对定位*/
  /*每个子元素都是相对于自身的初始位置*/
  /*每个子元素的left和top初始值都是0(不是参照页面的绝对初始，相对自身的初始)*/

  .f1,.f2
    /*流式布局,批量操作*/
  {
    display: flex;
    /*每个子元素均匀分布*/
    justify-content: space-around;
  }
  .f1>img{
    width: 200px;
    height: 300px;
    position: relative;
  }
  .f2{
    margin-top: 150px;
    font-size: 25px;
    font-weight: bold;
    color: lightpink;
  }
  .f2>div{
    width: 200px;
    height: 300px;
    border: 1px solid skyblue;
    text-align: center;
    /*行高与元素高度一致，垂直居中*/
    line-height: 300px;
  }


</style>
<body>
<div class="f1">
  <img src="关羽.jpg" onclick="m1(this,0/*相当于获取*/)">
  <img src="刘协.jpg" onclick="m1(this,1)">
  <img src="刘备.jpg" onclick="m1(this,2)">
  <img src="孙权.jpg" onclick="m1(this,3)">
  <img src="貂蝉.jpg" onclick="m1(this,4)">
  <img src="曹操.jpg" onclick="m1(this,5)">

</div>
<div class="f2">
  <div>刘协</div>
  <div>关羽</div>
  <div>刘备</div>
  <div>貂蝉</div>
  <div>曹操</div>
  <div>孙权</div>
</div>

</body>
<script>
  // 定义坐标对象，记录当前操作的元素位置
  let pos={x:0,y:0}
  // 定义一个数组，存放6个对象，独立记录每个对象的坐标（避免数据互串，出现瞬移）
  let arr=[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]

  function m1(img,i){
    // pos表示当前正在操作的对象
    pos=arr[i]
    document.onkeydown=function (e){
      switch (e.keyCode){
        case 37 :
          pos.x-=20
          img.style.left= pos.x+`px`
              break;
        case 38:
          pos.y-=20
          img.style.top=pos.y+`px`
          break;
        case 39:
          pos.x+=20
          img.style.left=pos.x+`px`
          break;
        case 40:
          pos.y+=20
          img.style.top=pos.y+`px`
          break;

      }
    }
  }
</script>
</html>