Question

以下HTML和Javascript具有应用于后台的缓动功能。它在Chrome，Safari甚至IE中运行良好，但不是firefox？

任何人都知道为什么它不会在FF工作？

＆＃13;

var element = "ele";
var ease_against = true;

window.onload = function() {

  var target = {
    x: 0,
    y: 0
  };

  var position = {
      x: target.x,
      y: target.y
    },

    ease = 0.2;

  document.getElementById(element).addEventListener("mousemove", function(event) {
    target.x = event.clientX / 5;
    target.y = event.clientY / 5;
  });

  update();

  function update() {
    var vx = ease_against ? (((target.x - target.x - target.x) - position.x) * ease) : ((target.x - position.x) * ease);
    var vy = ease_against ? (((target.y - target.y - target.y) - position.y) * ease) : ((target.y - position.y) * ease);

    position.x += vx;
    position.y += vy;

    document.getElementById(element).style.backgroundPositionY = position.y + "px";
    document.getElementById(element).style.backgroundPositionX = position.x + "px";

    requestAnimationFrame(update);
  }

};

＆＃13;

 html,
 body {
   margin: 0;
   width: 100%;
   height: 100%;
   padding: 0;
 }
 #ele {
   background: url('hex.jpg') repeat;
   width: 400px;
   height: 400px;
   margin-left: auto;
   margin-right: auto;
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   border-radius: 50%;
   overflow: hidden;
 }

＆＃13;

<div id="ele">

</div>

＆＃13;

Answer 1

导致问题的不是缓和。

Firefox不支持backgroundPositionX，但支持background position

例如，你可以这样做：

myElement.style.backgroundPosition = position.x + "px "+position.y + "px";

Javascript Easing在Firefox中无效

1 个答案: