用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