Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/85.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用JS向鼠标X和Y坐标添加平滑过渡?_Javascript_Jquery_Css - Fatal编程技术网

Javascript 如何使用JS向鼠标X和Y坐标添加平滑过渡?

Javascript 如何使用JS向鼠标X和Y坐标添加平滑过渡?,javascript,jquery,css,Javascript,Jquery,Css,我创建了一个函数,让DOM元素跟随鼠标光标。 当您将鼠标悬停在每个项目上时,指针将跟随您的鼠标移动。现在我正在搜索一些可以添加到此代码中的好动画。我在考虑稍微推迟一下过渡期。我已经尝试过使用transition:all 0.1s ease但这有点麻烦,不够“流畅”。我知道还有一种叫做立方的东西,但我不知道这是不是我需要的 我认为应该有一个功能,将减轻鼠标的X和Y坐标与一点平滑延迟添加到它 代表鼠标移动的部分是: function mouseMove(event) { var target

我创建了一个函数,让DOM元素跟随鼠标光标。

当您将鼠标悬停在每个项目上时,指针将跟随您的鼠标移动。现在我正在搜索一些可以添加到此代码中的好动画。我在考虑稍微推迟一下过渡期。我已经尝试过使用
transition:all 0.1s ease但这有点麻烦,不够“流畅”。我知道还有一种叫做立方的东西,但我不知道这是不是我需要的

我认为应该有一个功能,将减轻鼠标的X和Y坐标与一点平滑延迟添加到它

代表鼠标移动的部分是:

function mouseMove(event) {
  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var w = target.width();
  var h = target.height();
  var top = offset.top;
  var left = offset.left;
  console.log(left);

  var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
  var mY = (event.clientY - top) - height / 2;

  $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)');

};
.pointer {  
  position: absolute;
  z-index: 1;
  width: 25%;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
      transform: translateZ(0) scale(0);
      -webkit-transform: translateZ(0) scale(0);
}

.pointer:before {
  content: "";
  display: block;
  padding-top: 100%;
}
指针CSS:

function mouseMove(event) {
  var target = $(this);
  var dot = target.find('.pointer');

  var height = dot.height();
  var width = dot.width();

  var offset = target.offset();
  var w = target.width();
  var h = target.height();
  var top = offset.top;
  var left = offset.left;
  console.log(left);

  var mX = (event.clientX - left) - width / 2 - 15; // 15 = padding
  var mY = (event.clientY - top) - height / 2;

  $(dot).css('-webkit-transform', 'translate3d(' + mX + 'px , ' + mY + 'px, 0) scale(1, 1)');

};
.pointer {  
  position: absolute;
  z-index: 1;
  width: 25%;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
      transform: translateZ(0) scale(0);
      -webkit-transform: translateZ(0) scale(0);
}

.pointer:before {
  content: "";
  display: block;
  padding-top: 100%;
}
有没有人有我需要的建议、资源或代码部分

另一个我想要平滑地设置动画的想法是
指针
类的
缩放
属性。当鼠标进入缩略图时,它应该缩放为1,如果离开该区域,它应该缩放回零


期待您的回复。提前谢谢。

以下是我所做的一切:-)

干杯

也许这把小提琴能帮上忙?