水平和垂直悬停平移图像

时间:2013-10-01 13:40:08

标签: jquery css

我正在尝试在垂直和水平悬停时更改图像的背景位置,但以下代码无法正常工作。有什么想法吗?

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

1 个答案:

答案 0 :(得分:3)

你错过了一个空格和一个%

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

FIDDLE