当我将鼠标放在JavaScript上时,我需要重新定位方块。我该怎么做?

本教程将介绍当我将鼠标放在JavaScript上时,我需要重新定位方块。我该怎么做?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

当我将鼠标放在JavaScript上时,我需要重新定位方块。我该怎么做? 教程 第1张

问题描述

A.在"init"函数中添加"reposition"函数所需的代码,当请问鼠标悬停在与CSS类&Square"相关联的页面元素上时,立即调用"reposition"函数所需的代码。
B.修改"reposition"函数,使其允许您相对于对角线对称地重新定位正方形。
要做到这一点,只需颠倒该正方形的水平和垂直位置即可。注意:粉色正方形不会移动,因为它正好在对角线上(水平和垂直位置相同)。

<!DOCTYPE html>
<html lang="fr">
<head>
 <meta charset="UTF-8">
 <title>Reposition the squares</title>
 <style>
  #bac {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
text-align: center;
  }
  .square {
width: 50px;
height: 50px;
  }
  #square1 {
position: absolute;
left: 300px;
top: 200px;
background-color: red;
  }
  #square2 {
position: absolute;
left: 120px;
top: 75px;
background-color: blue;
  }
  #square3 {
position: absolute;
left: 50px;
top: 240px;
background-color: orange;
  }
  #square4 {
position: absolute;
left: 350px;
top: 0px;
background-color: black;
  }
  #square5 {
position: absolute;
left: 50px;
top: 50px;
background-color: pink;
  }
 </style>
 <script>
  function init() {
  //Code here

  }


  function reposition() {
  //code here
  }
 </script>
</head>
<body onload="init()">
 <h1>Reposition the squares</h1>
 <div id="bac">
  <div id="square1" class="square"></div>
  <div id="square2" class="square"></div>
  <div id="square3" class="square"></div>
  <div id="square4" class="square"></div>
  <div id="square5" class="square"></div>
 </div>
</body>
</html>

推荐答案

您可以只使用此脚本

<script>
 const squares = document.querySelectorAll(".square");
 for(let i = 0; i < squares.length; i++){
  squares[i].addEventListener("mouseover",(e)=>{
let v = getComputedStyle(squares[i]);
let top = v.getPropertyValue('top').replace(/D/g, "");
let left = v.getPropertyValue('left').replace(/D/g, "");;
if(top == left){
 e.preventDefault();
}
else{
 squares[i].style.top = left+"px";
}
  })
 }
</script>

首先我调用了所有的方块,然后为它的每个方块创建了一个事件

第二,当我将鼠标放在其上时,我搜索了顶部和左侧属性

第三,我只是从没有&quot;px&quot;的属性获得数字,这是我使用Regex的原因

最后,我为每个不匹配的方块提供了相同的顶部和左侧值

也许有人可以给您一个简短的代码,但这是我的解决方案(我还是学生),它对我有效。

注意:橙色方块将隐藏在粉色方块下面,因为两者的顶部和左侧值相同。

好了关于当我将鼠标放在JavaScript上时,我需要重新定位方块。我该怎么做?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。