Попытка применить CSS-преобразование в JavaScript - PullRequest
Новая
       6

Попытка применить CSS-преобразование в JavaScript

0 голосов
/ 13 января 2019

На моей странице есть элемент, который следует за курсором пользователя. Я пытаюсь использовать transform вместо top / left с простым javascript. Без каких-либо библиотек или зависимостей ... Проблема в том, что мне нужно применить значения, хранящиеся в переменных, к свойству 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 и google ...

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Вот, пожалуйста. Я сократил ваш код до необходимого минимума. 

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>
0 голосов
/ 13 января 2019

Вы можете сделать это, как показано ниже. Не забудьте установить 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>
...