尝试在JavaScript中应用CSS变换

Question

尝试在JavaScript中应用CSS变换

14

我的网页上有一个元素，跟随用户的鼠标移动。我试图使用纯JavaScript中的transform而不是top/left。没有任何库或依赖... 问题在于我需要将存储在变量中的值应用于transform属性中。我没找到任何能帮助我的东西... 以下是我的代码：

var cursor = document.getElementById('cursor');
document.body.addEventListener("mousemove", function(e) {
  //storing cursor position as variables
  var curX = e.clientX;
  var curY = e.clientY;
  
  
  // I need the code below to be replaced with transform-translate instead of top/left
  // I can not get this to work with any other method than top/left
  cursor.style.left = curX - 7 + 'px';
  cursor.style.top = curY - 7 + 'px';
    
});

body {
  background: orange;
  height: 500px;
  width: 500px;
}
#cursor {
    position: fixed;
    z-index: 20000;
    height: 14px;
    width: 14px;
    background-color: #222;
    border-radius: 50%;
    pointer-events: none!important;
}

<body>
<div id="cursor"></div>
</body>

这可能是一个简单甚至有些愚蠢的问题，但我在stackoverflow或谷歌上都没有找到类似的内容...

- Shape

2个回答

1

这是您要的。我将代码精简到了必要的最低限度。

document.body.addEventListener("mousemove", (e) => {
  cursor.style.transform = `translate(${e.clientX - 7}px, ${e.clientY - 7}px)`;
});

body {
  background: orange;
  height: 500px;
  width: 500px;
}
#cursor {
    position: fixed;
    z-index: 20000;
    height: 14px;
    width: 14px;
    background-color: #222;
    border-radius: 50%;
    pointer-events: none!important;
}

<div id="cursor"></div>

在兼容IE 10的ES5中，相同的解决方案：

document.body.addEventListener("mousemove", function(e) {
  cursor.style.transform = "translate(" + (e.clientX - 7) + "px, " + (e.clientY - 7) + "px)";
});

body {
  background: orange;
  height: 500px;
  width: 500px;
}
#cursor {
    position: fixed;
    z-index: 20000;
    height: 14px;
    width: 14px;
    background-color: #222;
    border-radius: 50%;
    pointer-events: none!important;
}

<div id="cursor"></div>

- connexo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

你可以像下面这样做。不要忘记设置top/left，始终具有相同的行为，因为translate将应用于元素位置。

var cursor = document.getElementById('cursor');
document.body.addEventListener("mousemove", function(e) {
  //storing cursor position as variables
  var curX = e.clientX;
  var curY = e.clientY;


  // I need the code below to be replaced with transform-translate instead of top/left
  // I can not get this to work with any other method than top/left
  //cursor.style.left = curX - 7 + 'px';
  //cursor.style.top = curY - 7 + 'px';
  cursor.style.transform = "translate(" + (curX - 7) + "px," + (curY - 7) + "px)";

});

body {
  background: orange;
  height: 500px;
  width: 500px;
}

#cursor {
  position: fixed;
  top:0;
  left:0;
  z-index: 20000;
  height: 14px;
  width: 14px;
  background-color: #222;
  border-radius: 50%;
  pointer-events: none!important;
}

<body>
  <div id="cursor"></div>
</body>

如果您希望此功能具有动态性并适用于任何宽度/高度，则可以考虑使用百分比和calc()：

var cursor = document.getElementById('cursor');
document.body.addEventListener("mousemove", function(e) {
  //storing cursor position as variables
  var curX = e.clientX;
  var curY = e.clientY;


  // I need the code below to be replaced with transform-translate instead of top/left
  // I can not get this to work with any other method than top/left
  //cursor.style.left = curX - 7 + 'px';
  //cursor.style.top = curY - 7 + 'px';
  cursor.style.transform = "translate(calc(" + curX + "px - 50%),calc(" + curY + "px - 50%))";

});

body {
  background: orange;
  height: 500px;
  width: 500px;
  margin: 0;
}

#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20000;
  height: 14px;
  width: 14px;
  background-color: #222;
  border-radius: 50%;
  pointer-events: none!important;
}

<body>
  <div id="cursor"></div>
</body>