当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - pan image on hover horizontally and vertically

问题描述:

I'm trying to change the background position of an image on hover both vertically and horizontally, however the following code fails to work. Any ideas?

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

});

网友答案:

You're missing a space, and a %

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

FIDDLE

分享给朋友:
您可能感兴趣的文章:
随机阅读: