Question

我设法创建了一个移动/平移背景图像。它在jsfiddle看起来很好用：

但是当我在浏览器中测试它时，移动不顺畅，照片有时会冻结。

这是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上运行了，但是在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 =＆gt;文件/宽度/高度。 Firefox像其他浏览器一样计算不正确的mousePositions。所以有办法修复它或离开（窗口）并检测浏览器（firefox）然后

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

或更改（文档）的（窗口），它适用于Chrome，Opera，Firefox，IE，Maxthon和Safari。对我来说应该很顺利。

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

1 个答案: