尝试在 javascript 中应用 CSS 转换答案

【问题标题】：Trying to apply CSS transform in javascript尝试在 javascript 中应用 CSS 转换
【发布时间】：2019-12-15 05:08:46
【问题描述】：

在我的页面上，我有一个跟随用户光标的元素。我想要做的是使用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>

这是一个简单甚至愚蠢的问题，但我在 stackoverflow 或谷歌上没有找到类似的东西......

【问题讨论】：

标签： javascript html css css-transforms

【解决方案1】：

你可以像下面那样做。不要忘记将 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>

【讨论】：

IE10、IE11 和 Edge caniuse.com/#search=calc -> 已知问题

【解决方案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;
}

&lt;div id="cursor"&gt;&lt;/div&gt;

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;
}

&lt;div id="cursor"&gt;&lt;/div&gt;

【讨论】：