Question

我的代码有些问题。基本上，我有一个红色的球和一个用于坐标的div框。

当我点击文档时，div.ball会转到我想要的位置，但是该框保持在其位置。在第二次点击之后，球进入它应该的位置并且盒子移动到球的先前位置。双击同一位置后，该框应该到达应有的位置。

我希望这个盒子就像一个工具提示，每次出现在球旁边。

你们能帮助我吗？

＆＃13;

function menuRoll(){
    var hidden_collapse = document.getElementById("hidden_collapse");
    hidden_collapse.classList.toggle("myStyle");
}


function readPosition(ball){
    var rect = ball.getBoundingClientRect();
    var x = Math.round(rect.left) + "px";
    var y = Math.round(rect.top) + "px";
    coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y;
    coordinat.style.top = Math.round(rect.top) - 30 + "px";
    coordinat.style.left = Math.round(rect.left) + 37 + "px";
}


window.onload = function(){
    var ball = document.getElementById('foo');
    var ball_space = document.getElementById('ball_space');
    var coordinat = document.getElementById("coordinat");
    document.addEventListener('click', function(e){

        ball.style.background = "#B40520";
        var ball_H = ball.offsetHeight;
        var ball_W = ball.offsetWidth;
        readPosition(ball);
        ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)';
        ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)';

    }, true);

};

＆＃13;

#coordinat {
  transition: all 1s;
  border-radius: 5px;
  position: absolute;
  text-align: center;
  right: 5px;
  top: 5px;
  width: 150px;
  height: 30px;
  padding: 5px 5px;
  background-color: black;
  color: white;
  font-size: 0.8em;
}

#foo{
  margin: 2px;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  /*background: #B40520;*/
  background: white;
  position: absolute;
  top: 0px;
  left: 0px;
  -moz-transition: transform 1s, background 1s;
  -webkit-transition: transform 1s, background 1s;
  -ms-transition: transform 1s, background 1s;
  -o-transition: transform 1s, background 1s;
  transition: transform 1s, background 1s;

}

＆＃13;

<div id="coordinat">Coordinates you will see!</div>
<div id="ball_space">
    <div id="foo"></div>
</div>

＆＃13;

Answer 1

您正在阅读工具提示的先前位置，而是将球位置用于工具提示位置，已在您的代码段中更新

＆＃13;

function menuRoll(){
      var hidden_collapse = document.getElementById("hidden_collapse");
      hidden_collapse.classList.toggle("myStyle");
      }
//readPosition();

      function readPosition(ball){
        //console.log(ball.clientY,ball.clientX);
        var clientX = parseInt(ball.clientX);
        var clientY = parseInt(ball.clientY);
        if((clientX+150) > window.innerWidth){
          clientX -= 210;
        }
        coordinat.style.top = (clientY-37) + "px";
        coordinat.style.left = (clientX+30) + "px";
        document.getElementById('coordinat').innerHTML = "Coordinates:"+ "<br>"+ clientX+" X "+clientY;
      }


window.onload = function(){
  var ball = document.getElementById('foo');
  var ball_space = document.getElementById('ball_space');
  var coordinat = document.getElementById("coordinat");
  document.addEventListener('click', function(e){
    ball.style.background = "#B40520";
    var ball_H = ball.offsetHeight;
    var ball_W = ball.offsetWidth;
    ball.style.transform = 'translateY('+(e.clientY-(0.5*ball_H))+'px)';
    ball.style.transform += 'translateX('+(e.clientX-(0.5*ball_W))+'px)';
    readPosition(e);
  }, true);

};

＆＃13;

#coordinat {
  transition:all 1s;
  border-radius: 5px;
  position: absolute;
  text-align: center;
  right: 5px;
  top: 5px;
  width: 150px;
  height: 30px;
  padding: 5px 5px;
  background-color: black;
  color: white;
  font-size: 0.8em;
}

#foo{
margin: 2px;
border-radius:50px;
width:30px;
height:30px;
/*background:#B40520;*/
background: white;
position:absolute;
top:0px;
left:0px;
-moz-transition: transform 1s, background 1s;
-webkit-transition: transform 1s, background 1s;
-ms-transition: transform 1s, background 1s;
-o-transition: transform 1s, background 1s;
transition: transform 1s, background 1s;

}

＆＃13;

<div id="ball_space">
      <div id="coordinat">Coordinates you will see!</div>
     <div id="foo"></div>
    </div>

＆＃13;

如果你点击最右边，还添加了在左边移动工具提示的代码，工具提示会自动切换到左边

if((clientX+150) > window.innerWidth){
    clientX -= 210;
}

Answer 2

你应该将球的新位置传递给你的redPosition（）函数，因为这个函数在动画之后不知道位置。正如您在JSFiddle中所发现的那样，我将一个新的球位置传递给函数，所以现在可以正确计算它。

JS解决您的问题：

function menuRoll(){
      var hidden_collapse = document.getElementById("hidden_collapse");
      hidden_collapse.classList.toggle("myStyle");
      }


      function readPosition(ball, yPos, xPos){
        var rect = ball.getBoundingClientRect();
        var x = Math.round(xPos) + "px";
        var y = Math.round(yPos) + "px";
        coordinat.innerHTML = "Coordinates:"+ "<br>" + x + ", " + y;
        coordinat.style.top = Math.round(yPos) - 30 + "px";
        coordinat.style.left = Math.round(xPos) + 37 + "px";
      }


window.onload = function(){
  var ball = document.getElementById('foo');
  var ball_space = document.getElementById('ball_space');
  var coordinat = document.getElementById("coordinat");
  document.addEventListener('click', function(e){

    ball.style.background = "#B40520";
    var ball_H = ball.offsetHeight;
    var ball_W = ball.offsetWidth;

    var ball_new_h = e.clientY-(0.5*ball_H);
    var ball_new_w = e.clientX-(0.5*ball_W);
    readPosition(ball, ball_new_h, ball_new_w);
    ball.style.transform = 'translateY('+ ball_new_h +'px)';
    ball.style.transform += 'translateX('+ball_new_w+'px)';

  }, true);

};

如何使用工具提示跟随触发事件的元素？

2 个答案: