jQuery转换无法正常工作[关闭]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery转换无法正常工作[关闭]相关的知识，希望对你有一定的参考价值。
我正在构建一个简单的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>我试图从类似的问题中应用答案，但似乎没有一个对我有用。有任何想法吗？
答案
不知道你想要在这里实现什么，但你只需将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>另一答案
解决了！
我忘了在变量之后插入单位（px）...
以上是关于jQuery转换无法正常工作[关闭]的主要内容，如果未能解决你的问题，请参考以下文章
我将“Int.TryParse”更改为 while，现在我的代码无法正常工作 [关闭]
使用jQuery $ .ajax方法显示包含MySQL表数据的JSON [关闭]