水平和垂直懸停平移圖像

我試圖更改背景圖像的位置垂直和水平懸停，但是下面的代碼無法正常工作。有任何想法嗎？水平和垂直懸停平移圖像

CSS：

#background-thing{ 
    background: url(http://www.dnitza.com/experiments/fullscreen-pan/stairway.jpg) no-repeat 0 0 scroll; 
    background-size: cover; 
    height: auto; 
    left: 0; 
    min-height: 100%; 
    min-width: 1024px; 
    overflow: hidden; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

JQuery的：

$('#background-thing').mousemove(function(e){ 
    var mousePosX = (e.pageX/$(window).width())*100; 
    var mousePosY = (e.pageY/$(window).height())*100; 
    $('#background-thing').css('backgroundPosition', mousePosX+'%' + mousePosY); 
});

來源

2013-10-01 user2835060

你缺少空間，並且％

$('#background-thing').css('backgroundPosition', mousePosX +'% '+mousePosY+'%');

FIDDLE

來源

2013-10-01 13:43:34 adeneo

看起來不錯:-)。也可能想要緩存一些值：http://jsfiddle.net/maniator/9h9Lx/ :-D – Neal

作爲旁註，高度似乎設置爲100％，因此它不會垂直平移 – adeneo

如果您減少幀的高度強制垂直滾動，然後水平滾動不會發生。如果你不這樣做，那麼橫向滾動不會一直滾動到右側。這些是原始方法的根本問題，但我不知道如何解決它們。 – Blazemonger

水平和垂直懸停平移圖像

回答

相關問題