时间戳

首页 > 解决方案 > 附加到光标然后返回原始位置

javascript - 附加到光标然后返回原始位置

问题描述

我正在尝试使鼠标悬停在 div 上时，该 div 的子级会附加到光标上，当您离开 div 时，子级会返回到其原始位置。

这是我到目前为止所拥有的：

$('div').each(function() {  
        var img = $(this).find( "figure" );
    var offset = img.offset();
    var originLeft = offset.left;
    var originTop = offset.top;
    $('div').mousemove(function(e) {
            img.addClass('active');
        img.css({
              transform: 'translateX(' + (e.pageX - originLeft/2 ) + 'px) translateY(' + (e.pageY - originTop) + 'px)'
            });
    }).mouseleave(function() {
            img.removeClass('active');
        img.css({
              transform: 'translateX(0) translateY(0)'
            });
    });
});
div { 
    height: 250px;
    width: 250px;
    background: #eee;
}

div:nth-child(2) {
  background: #ccc;
}

figure {
  display: block;
  height: 50px;
  width: 50px;
  background: blue;
  margin: 0;
  transition: transform 500ms ease;
}

.active {
   transition: none; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <figure></figure>
</div>


<div>
    <figure></figure>
</div>

问题是，如果页面上有多个它们，它就不起作用，而且，mouseleave 事件似乎有问题：有时它需要一秒钟或者在它返回到原始位置之前有一些闪烁。

标签： javascripthtmljquerycss

解决方案

使用 mouseenter 添加 mousemove 侦听器并在 mouseleave 中删除它可以解决大部分问题。另一部分是，如果图像在离开容器时直接位于鼠标下方，则鼠标仍位于 child 上方。

为相对于鼠标的图像位置添加一些额外的偏移量有助于消除其余的错误

$('div').on('mouseenter', function() {
  var img = $(this).find("figure");
  var offset = img.offset();
  var originLeft = offset.left;
  var originTop = offset.top;
  // only listen to move on this instance
  $(this).mousemove(function(e) {
    img.addClass('active').css({
      transform: 'translateX(' + (e.pageX - originLeft / 2) + 'px) translateY(' + (e.pageY+10  - originTop) + 'px)'
    });
  })

}).on('mouseleave', function() {
  // remove the mousemove listener
  $(this).off('mousemove').find("figure").removeClass('active').css({
    transform: 'translateX(0) translateY(0)'
  });
});
div {
  height: 150px;
  width: 150px;
  background: #eee;
  margin-bottom: 30px
}

div:nth-child(2) {
  background: #ccc;
}

figure {
  display: block;
  height: 50px;
  width: 50px;
  background: blue;
  margin: 0;
  transition: transform 500ms ease;
}

.active {
  transition: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <figure></figure>
</div>


<div>
  <figure></figure>
</div>

推荐阅读