Question

我正在构建一个简单的jQuery函数来使用mousemove移动元素。我正在尝试使用.css（＆＃39;转换＆＃39;，＆＃39;翻译......＆＃39;），但不知怎的，我无法让它发挥作用。

＆＃13;

$(document).on('mousemove', function (ev) {

	var mouseX = ev.originalEvent.pageX;
	var mouseY = ev.originalEvent.pageY;

	$('.followmouse').each(function () {

		var objectX = $(this).offset().left;
		var objectY = $(this).offset().top;

		var diffX = mouseX - objectX;
		var diffY = mouseY - objectY;

		$(this).css('transform', 'translate(' + diffX + ', ' + diffY + ')');

	});

});

＆＃13;

html, body {
  height: 100%;
  display: flex;
  justify-content: center;
}

.followmouse {
  width: 100px;
  height: 100px;
  background: black;
  align-self: center;
  margin: 16px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div class="followmouse"></div>
<div class="followmouse"></div>

</body>

＆＃13;

我试图应用类似问题的答案，但似乎没有一个对我有用。有什么想法吗？

Answer 1

解决！

我忘了在变量...

之后插入单位（px）

Answer 2

不知道您想要在这里实现什么，但您只需将px附加到您的翻译价值'translate(' + diffX + 'px, ' + diffY + 'px)'

见下面的代码：

$(document).on('mousemove', function (ev) {
  console.log(ev.target,this);
	var mouseX = ev.originalEvent.pageX;
	var mouseY = ev.originalEvent.pageY;

	$('.followmouse').each(function () {

		var objectX = $(this).offset().left;
		var objectY = $(this).offset().top;

		var diffX = mouseX - objectX;
		var diffY = mouseY - objectY;
    console.log(diffX,diffY);
		$(this).css('transform', 'translate(' + diffX + 'px, ' + diffY + 'px)');

	});

});

html, body {
  height: 100%;
  display: flex;
  justify-content: center;
}

.followmouse {
  width: 100px;
  height: 100px;
  background: black;
  align-self: center;
  margin: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div class="followmouse"></div>
<div class="followmouse"></div>

</body>

jQuery转换不起作用

2 个答案: