时间戳

首页 > 解决方案 > 如何更改我的 jQuery 代码以使 div 顺利跟随我的光标？

jquery - 如何更改我的 jQuery 代码以使 div 顺利跟随我的光标？

问题描述

我有一些 jQuery 代码可以使圆形跨度跟随我的光标。它可以工作，但是我在另一个网站上看到了另一个在移动光标时使用transform: translate()而不是top和left属性的方法，并且当光标四处移动时它会更加平滑。

谁能告诉我如何编辑此代码以使用transform: translate()？

JSFiddle： https ://jsfiddle.net/oj70y5Lm/

CSS、JQuery 和 HTML

jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;

  $(document).mousemove(function(e){
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20; 
  });

  setInterval(function(){
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    $("#circle").css({left: xp +'px', top: yp +'px'});
  }, 20);

});
body, html {
  position: relative;
  height: 100%; 
  width : 100%;  
  margin: 0;
}

.circle {
    position: absolute;
    background: #000000;
    opacity: .075;
  width: 40px; 
  height: 40px; 
    border-radius: 50%;  
    pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

标签： jquerycss

解决方案

尝试使用 CSS 过渡，而不是使用 20 毫秒间隔的 JS。CSS 总是比定时 JS 流畅得多

jQuery(document).ready(function() {

  var mouseX = 0, mouseY = 0;
  var xp = 0, yp = 0;

  $(document).mousemove(function(e){
    mouseX = e.pageX - 20;
    mouseY = e.pageY - 20;
    
    xp += ((mouseX - xp)/3);
    yp += ((mouseY - yp)/3);
    $("#circle").css({left: xp +'px', top: yp +'px'});
  });
});
body, html {
  position: relative;
  height: 100%; 
  width : 100%;  
  margin: 0;
}

.circle {
    position: absolute;
    background: #000000;
    opacity: .075;
  width: 40px; 
  height: 40px; 
    border-radius: 50%;  
    pointer-events: none;
    transition: left 20ms ease-in-out, top 20ms ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="circle" class="circle"></span>

推荐阅读