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

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)
    });
});

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

background image movement dependent on mouse position

jquery

css-position

mouseevent