我设法创建了一个移动/平移背景图像。它在 jsfiddle 中看起来和工作正常:
http://jsfiddle.net/juhant/jxthp/6/
但是当我在浏览器中测试它时,移动并不顺畅,照片有时会冻结。
这是 HTML:
<div id="pageBg">
</div>
这是CSS:
#pageBg {
background: url('http://enos.itcollege.ee/~rselis/bg_front.jpg') no-repeat 0 0 scroll;
height: auto;
left: 0;
min-height: 900px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height: 100%;
}
和 jQuery 位:
$(document).ready(function(){
$('#pageBg').mousemove(function(e){
var mousePosX = (e.pageX/$(window).width())*100;
$('#pageBg').css('background-position-x', mousePosX +'%');
var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');
});
});
是什么原因造成的,我该如何解决?先感谢您。