我的网页上有一个元素,跟随用户的鼠标移动。
我试图使用纯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或谷歌上都没有找到类似的内容...