jQuery转换不起作用[关闭]答案

【问题标题】：jQuery transform not working [closed]jQuery转换不起作用[关闭]
【发布时间】：2017-12-17 13:33:46
【问题描述】：

我正在构建一个简单的 jQuery 函数来使用 mousemove 移动元素。我正在尝试使用 .css('transform', 'translate...')，但不知何故我无法让它工作。

$(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 + ')');

	});

});

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>

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

【问题讨论】：

“这个问题是由一个无法再复制的问题或一个简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。” 很高兴你明白了，最好只使用“删除”链接来删除问题。
您的transform 属性单位值似乎未指定；这些值应该以px 结尾（表示正在使用 pixel 单位值）或类似的东西，例如：您的规则最终应该看起来像这样：transform: translate(3px, 3px);，但是，它似乎好像它最终可能看起来像这样：transform: translate(3, 3);

标签： javascript jquery css transform

【解决方案1】：

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

参见下面的 sn-p ：

$(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>

【讨论】：

【解决方案2】：

解决了！

我忘记在变量后面插入单位 (px)...

【讨论】：