下面的 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/