如何平滑背景图像的移动？

Question

我已经成功创建了一个移动/平移背景图像。它在 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 +'%');
   }); 
});

这是什么原因造成的，我该如何解决？先感谢您。

Answer 1

它现在可以在 firefox 和 ie 上运行，但在 firefox 上它太敏感但背景位置现在很好

            $('#pageBg').mousemove(function(e){
                var mousePosX = (e.pageX/$(document).width())*100;
                var mousePosY = (e.pageY/$(document).height())*100;

                $('#pageBg').css({
                    'background-position': mousePosX +'%' + mousePosY +'%'
                });

            }); 

已编辑：您必须更改 window => document/width/height 。 Firefox 不像其他浏览器那样计算鼠标右键。 所以有办法修复它或离开（窗口）并检测浏览器（firefox）然后

var mousePosY = (e.pageY/$(document).height()); //without 100

或将（窗口）更改为（文档），它适用于 Chrome、Opera、Firefox、IE、Maxthon 和 Safari。 对我来说应该是平滑的。