如何调整此代码以增加鼠标移动的方便性？

Question

我试图添加到我的网站上的自定义光标放松，但我没有运气后，尝试了一些事情。如果有人知道如何调整下面的代码来启用这个功能，那将是非常有用的，因为我已经坚持了几个小时了！

我喜欢阅读有关使用lerp实现此看这个科丁的文章，但无法成功地提取代码。

​

jQuery(document).ready(function($){
$(document).mousemove(function(e) {

  const cursor = $('.custom-cursor');
  const target = $(event.target);
  
  // update position of cursor
  cursor.css('left', e.clientX-10).css('top', e.clientY-10);
  
  const isLinkTag = target.is('a,span,[onclick],img,video,i');
  const isHovered = cursor.hasClass('hoveredCursor');
  
  // toggle the cursor class if necessary 
  if(isLinkTag && !isHovered) {
  
    cursor.addClass('hoveredCursor');

  } else if(!isLinkTag && isHovered) {
  
    cursor.removeClass('hoveredCursor');
  
  }
  
})
 
$(document).mouseleave(function(e) {

  const cursor = $('.custom-cursor');
  cursor.hide()

});

$(document).mouseenter(function(e) {

  const cursor = $('.custom-cursor');
  cursor.show()

});
});

* {
  cursor: none;
}

.custom-cursor{
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FB4D98;
  border: 2px solid black;
  position: fixed;
  border-radius:50%;
  pointer-events: none !important;
  z-index: 99999999 !important;
  transition: transform 0.2s;
}

.hoveredCursor {

 transform: scale(0.5);
  transition: transform 0.2s;
  opacity: 0.5;
  background-color: black;
  border: 2px solid #FB4D98;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-cursor"></div>

​

Answer 1

这里有一个在vanilla中的工作示例；javascript只负责将一个新位置应用到自定义游标中，并确定它的缩放范围。当鼠标离开文档时，css处理隐藏光标，将自定义游标以鼠标的位置为中心，并进行转换。

​

let cursor = document.querySelector('.custom-cursor');
document.addEventListener('mousemove', evt => {
    
  let { clientX: x, clientY: y } = evt;
  let scale = 1;
  
  if (evt.target.matches('a,span,[onclick],img,video,i')) {
    cursor.classList.add('active');
    scale = 0.5;
  } else {
    cursor.classList.remove('active');
  }
  
  cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
  
});

* { cursor: none; }

html, body {
  top: 0; left: 0; bottom: 0; right: 0;
  padding: 0; margin: 0;
}
html { position: absolute; overflow-x: hidden; overflow-y: scroll; }
body { position: relative; height: 4000px; }

.custom-cursor {
  position: fixed;
  width: 20px; height: 20px;
  margin-left: -10px; margin-top: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 0;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition:
    transform ease-out 0.5s,
    border 0.5s,
    opacity 0.5s,
    background-color 0.5s;
}
.custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}
body:hover > .custom-cursor { opacity: 1; }
a {
  position: relative;
  font-size: 40px;
  top: 100px;
  left: 100px;
}

<div class="custom-cursor"></div>
<a href="link">Link</a>

​

Answer 2

更改css类.custom-cursor如下：

.custom-cursor{
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #FB4D98;
  border: 2px solid black;
  border-radius: 50%;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform: translate(-50%, -50%);
}

并在更新光标位置后添加setInterval (move,1000/60)：

$(document).mousemove(function(e) {

  const cursor = $('.custom-cursor');
  const target = $(event.target);
  
  // update position of cursor
  cursor.css('left', e.clientX-10).css('top', e.clientY-10);
  setInterval (move,1000/60);
  const isLinkTag = target.is('a,span,[onclick],img,video,i');
  const isHovered = cursor.hasClass('hoveredCursor');
  
  // toggle the cursor class if necessary 
  if(isLinkTag && !isHovered) {
  
    cursor.addClass('hoveredCursor');

  } else if(!isLinkTag && isHovered) {
  
    cursor.removeClass('hoveredCursor');
  
  }
  
})

这里是一个有用的例子。

Answer 3

实际上，您应该添加您所引用的代码。

您只需要设置一次const cursor。

您应该在css中设置top和left，因为如果在鼠标移动时在JavaScript中设置它，它将连续地重置该元素的位置。

因为它是一个唯一的元素，所以您还应该为id使用一个#custom-cursor。

您需要专门为其他属性设置转换，而且由于transform与JavaScript一起更改，所以您应该更改width和height，而不是扩展。

​

jQuery(document).ready(function($) {
  const cursor = $('#custom-cursor');

  $(document).mousemove(function(e) {
    const target = $(event.target);
    const isLinkTag = target.is('a,span,[onclick],img,video,i');
    const isHovered = cursor.hasClass('hoveredCursor');

    // toggle the cursor class if necessary 
    if (isLinkTag && !isHovered) {
      cursor.addClass('hoveredCursor');
    } else if (!isLinkTag && isHovered) {
      cursor.removeClass('hoveredCursor');
    }
  });

  $(document).mouseleave(function(e) {
    cursor.hide()
  });

  $(document).mouseenter(function(e) {
    cursor.show()
  });
});

var mouseX = window.innerWidth / 2;
var mouseY = window.innerHeight / 2;

var circle = {
  el: $('#custom-cursor'),
  x: window.innerWidth / 2,
  y: window.innerHeight / 2,
  w: 80,
  h: 80,
  update: function() {
    l = this.x - this.w / 2;
    t = this.y - this.h / 2;
    this.el.css({
      'transform': 'translate3d(' + l + 'px,' + t + 'px, 0)'
    });
  }
}

$(window).mousemove(function(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
})

setInterval(move, 1000 / 60)

function move() {
  circle.x = lerp(circle.x, mouseX, 0.1);
  circle.y = lerp(circle.y, mouseY, 0.1);
  circle.update()
}

function lerp(start, end, amt) {
  return (1 - amt) * start + amt * end
}

* {
  cursor: none;
}

#custom-cursor {
  width: 20px;
  height: 20px;
  top: 28px;
  left: 28px;
  bottom: 0;
  right: 0;
  background-color: #FB4D98;
  border: 2px solid black;
  position: fixed;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 99999999 !important;
  transition: background-color 1s, border-color 1s, width .5s, height .5s;
}

.hoveredCursor {
  width: 10px !important;
  height: 10px !important;
  opacity: 0.5;
  background-color: black !important;
  border: 2px solid #FB4D98 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="custom-cursor"></div>

<a href="#">Hover me</a>
<br><br><br><br><br>
<span>Hover me too</span>

​