Question

在这里我有一个背景图像在身体上，并在移动背景中的图像移动时跟随脚本。 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中工作，所以我怎样才能实现这一点... plz帮帮我

Answer 1

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

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

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

1 个答案: