尝试在 javascript 中应用 CSS 转换

Question

在我的页面上，我有一个跟随用户光标的元素。我想要做的是使用 transform 而不是 top/left 和普通 javascript。没有任何图书馆或依赖...... 问题是我需要将存储在变量中的值应用于转换属性。我没有找到任何可以帮助我的东西...... 这是我的代码：

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>

这是一个简单甚至愚蠢的问题，但我在 Whosebug 或 google...

上没有发现类似的问题

Answer 1

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

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() 如果您希望它是动态的并且可以使用任何 width/height:

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>

Answer 2

给你。我将您的代码减少到最低限度。

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>

尝试在 javascript 中应用 CSS 转换

Trying to apply CSS transform in javascript

html

javascript

css

css-transforms