使用 jQuery 来回移动图像效果

Question

我非常喜欢移动鼠标时飞船移动的效果。有谁知道用jQuery如何实现这个效果吗？

链接如下： http://spaceexpeditions.xcor.com/

Answer 1

您可以使用这个简单的代码

$(window).mousemove(function(e){
    var clientX = e.clientX;
    var clientY = e.clientY;
    
    var width = $(window).width();
    var height = $(window).height();
    
    var constWidth = (width / 2) - $("div").width();
    var constHeight = (height / 2) - $("div").height();   
    
    $("div").css({
        left: constWidth + ((constWidth - clientX) / 10),
        top: constHeight + ((constHeight - clientY) / 10)        
    });  
});

body {
    position: relative;
}

div {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
    top: 50px;
    left: 300px;
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

在 jsfiddle

中查看示例的更好结果

Answer 2

要实现来回移动，请将左边距增加“x”个像素，然后减少“x”个像素：

$(".blue-box")
   .animate({
      "margin-left": "+=200px",
  }).animate({ "margin-left": "-=200px" });