javascript - 鼠标移动事件在 mozilla 中不起作用

Question

在这个过程中，我在 body 上有一个背景图像，当移动背景中的图像时，还有以下脚本。这个的CSS是

      body
    {
background-image:url('../images/1.png');
background-size:98%;
background-position:center top;
background-repeat:no-repeat;

  } 


         <script>
         $(document).ready(function(){
         $('#big').mousemove(function(e){
         var mousePosX = (e.pageX/$(window).width())*100;
         $('#big').css('background-position-x', mousePosX +'%');
          var mousePosY = (e.pageY/$(window).height())*100;
         $('#big').css('background-position-y', mousePosY +'%');
         console.log(mousePosX, mousePosY);
       }); 
      });
     </script>

我的问题是这段代码在 chrome 中完美运行，但在 mozilla firefox 中不起作用，所以我该如何实现...请帮助我

Answer 1

background-position-x 仅适用于 webkit 浏览器，但是您可以使用 background-position-x 并在同一行中声明两者:

  var mousePosX = (e.pageX/$(window).width())*100;
  var mousePosY = (e.pageY/$(window).height())*100;
  $('#big').css('background-position', mousePosX +'%' + ' ' + mousePosY +'%');