Javascript Easing 在 Firefox 中不起作用

标签 javascript html firefox animation

下面的 HTML 和 Javascript 具有应用于背景的缓动功能。它在 Chrome、Safari 甚至 IE 中都可以正常工作,但在 Firefox 中却不行?

有人知道为什么它在 FF 中不起作用吗?

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);
  }

};
 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;
 }
<div id="ele">

</div>

最佳答案

导致问题的不是宽松。

Firefox 不支持 backgroundPositionX,但支持 background position

例如你可以这样做:

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

关于Javascript Easing 在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34323550/

相关文章:

javascript - 如何在特定子元素上使用 jquery 的 html()

javascript - 如何在切换后使用 fullPage.js 移动到节内的特定 div

javascript - jQuery Deferred 的完成回调与成功回调

flash - 复制到剪贴板在 FireFox 上不起作用

JavaScript(JQuery): Cancelling a selection in select control in FireFox

javascript - 使用另一个方法中的变量

html - 样式化 Bootstrap 按钮

javascript - 使用 JavaScript 更改 anchor 文本

jquery - 如何在 div 容器内的图像上放置图层?

html -::before 也在 Firefox 中影响 optgroup 标签