Question

当你移动鼠标时，我非常喜欢宇宙飞船运动的效果。有谁知道如何用jQuery实现这种效果？

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

中查看更好的示例结果

使用jQuery移动图像来回移动效果

1 个答案: