Question

我试图重新创建背景中雕像的悬停/鼠标移动效果：http://toyfight.co/

我目前得到的是

  $('.phone-container').on('mousemove',function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetLeft;
          $('.phone-front').css({'right': x}); 
          $('.phone-front').css({'bottom': y}); 

  });

这使得手机移动，但我不知道如何限制它并创造相同的平滑效果。

http://codepen.io/salman15/pen/evQVLV

你们其中一个人可以向我解释它是如何做得最好的吗？

Answer 1

我在另一篇文章中找到了答案： Mousemove parallax effect moves position of div

$(document).ready(function () {
    $('#layer-one').mousemove(function (e) {
        parallax(e, this, 1);
        parallax(e, document.getElementById('layer-two'), 2);
        parallax(e, document.getElementById('layer-three'), 3);
    });
});

function parallax(e, target, layer) {
    var layer_coeff = 10 / layer;
    var x = ($(window).width() - target.offsetWidth) / 2 - (e.pageX - ($(window).width() / 2)) / layer_coeff;
    var y = ($(window).height() - target.offsetHeight) / 2 - (e.pageY - ($(window).height() / 2)) / layer_coeff;
    $(target).offset({ top: y ,left : x });
};

Jquery ||在鼠标移动时限制和平滑可移动div

1 个答案: