当光标靠近时将 div 动画向光标移动，然后当光标远离时将 div 动画返回到原始位置

【问题标题】：Animate div toward cursor when cursor is near, and then animate div back to original position when cursor is far当光标靠近时将 div 动画向光标移动，然后当光标远离时将 div 动画返回到原始位置
【发布时间】：2018-04-06 16:33:54
【问题描述】：

我希望重新创建这些网站的内容。当鼠标靠近时，div 似乎向鼠标移动，但当鼠标移开时，它们又回到原来的位置。

这里有一些例子：https://www.clapat.com/（他们的菜单）和http://twotwentytwo.se/（他们的标志）

我不知道从哪里开始，所以任何信息都会很棒。谢谢！

【问题讨论】：

clapat 的源代码似乎没有被缩小，因此很容易复制他们的设计。

标签： javascript jquery html css web

【解决方案1】：

我认为您应该从以下示例开始。尝试使用 jQuery Animate、CSS3 并创建您需要的内容。

$(".movable").mousemove(function(e){
    $("#image").stop().animate({left:e.pageX, top:e.pageY});
});

#image{
  text-align:center;
}
.movable:hover #image{
  position:absolute;
}
.movable{
  width:200px;
  height:200px;
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="movable">
  <img id="image" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/menu-256.png" width="40px"/>
</div>

【讨论】：