Question

嗨我正在尝试在单击链接时将div放在鼠标中心

我有类似

的东西

<a id='btn' href='#' ><img src='test.png' /></a>

我想在test.png上看到新的div叠加，我希望我的鼠标诅咒成为新div的垂直和水平中心。

我的js

var contentDiv = document.createElement('div');
var img        = document.createElement('img');

contentDiv.setAttribute('class','test1');

img.src='newimg.png';
contentDiv.appendChild(img);

$("#btn").on('click', function(e){
   $('body').append(contentDiv)
   var w = $(contentDiv).width()/2
   var h = $(contentDiv).height()/2
   var x = e.pageX - h  //- $(this).offset().left;
   var y = e.pageY - w  //- $(this).offset().top;
   $(contentDiv).css({top: y, left: x, 'transform': 'scale(.2)'})
    e.preventDefault();         
})

我的代码不会将鼠标光标作为新div的中心。任何人都可以帮我吗？非常感谢！

Answer 1

尝试

var x = e.pageX - w
var y = e.pageY - h

Example

这是获取鼠标位置（e.pageX）的jQuery方式，所以你也可以这样做：

var x = e.clientX - w;
var y = e.clientY - h;

Example

这是纯粹的JS方式。

你的问题是你从x中减去高度和从y减去宽度，而它应该是另一种方式。请记住，x是左右，y是上下。在计算机科学中，向上递减y，向下递减y，向右递增x，向左递减x。

不要让他们混淆。

如何基于鼠标光标居中新的div

1 个答案: