Question

我试图让背景图像相对于其容器内的鼠标位置移动，我试图模仿here所见的相同效果，他们的顶部横幅链接移动关系到鼠标位置，以便它们始终在视野中。

我已经开始尝试自己计算，但我正在努力使用它的方程式。

$(function(){
    var container = $('.container');
    var img = $('.container img');
    var ch = container.height();
    var cw = container.width();
    var ih = img.height();
    var iw = img.width();

    container.on('mousemove', function(e){
        var x = (e.pageX - container.offset().top)/cw*100;
        var y = (e.pageY - container.offset().left)/ch*100;
        img.css({'left': x, 'top': y});
        $('span').empty().append(x + ' : '+y)
    });
});

我已将这个fiddle放在一起以显示我的进度，到目前为止它根据位置的一半来跟踪和更新图像位置，但我的目标是将鼠标放到右下角容器的一角，看到图像的右下角。

我猜我需要根据集装箱中心的鼠标位置来计算这个，但不能算出等式。

Answer 1

我想我已经明白了。这完全取决于图像移动自身。因此，图像将移至负计算，因此img.css({'left': -x, 'top': -y})我得到了预期的效果。

我认为为了获得最佳效果，收容div需要与图像的比例相同。

$(function(){
    var container = $('.container');
    var img = $('.container img');
    var ch = container.height();
    var cw = container.width();
    var ih = img.height();
    var iw = img.width();

    container.on('mousemove', function(e){
        var x = (e.pageX - container.offset().top)/cw*100;
        var y = (e.pageY - container.offset().left)/ch*100;
        img.css({'left': -x, 'top': -y});
        $('span').empty().append(x + ' : '+y)
    });
});

背景图像运动取决于鼠标位置

1 个答案: