尝试应用CSS在JavaScript变换(Trying to apply CSS transform

在我的网页我有如下用户的光标的元素。什么我试图做的是使用transform ，而不是top / left与普通的JavaScript。没有任何库或depencies ...问题是，我需要应用存储在变量变换属性值。我没有找到任何可以帮助我......这里是我的代码：

 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>

这是一个简单的，甚至是愚蠢的问题，但我还没有找到计算器和谷歌这样的事......

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()如果你想这是动态的，与任何宽度/高度的工作：

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