gpt4 book ai didi

javascript - CSS Sprite 代码在 Chrome 和 IE 中有效,但在 Firefox 中无效?

转载 作者:行者123 更新时间:2023-11-28 10:41:45 25 4
gpt4 key购买 nike

我使用 CSS 和 HTML 使用 sprite 编写了简单的动画。它在 chrome 和 IE 中运行成功,但在 firefox 中运行失败。

<style type="text/css">
#sprite {
width: 96px;
height: 117px;
background: url(../../images/sprite_animation_frames.png) 0px 0px;
}
</style>
</head>

<body onload="main();">
<p align="center"><h1>The Running Man</h1></p>
<script>
var position = [
[0, 0],[-100, 0],[-200, 0],[-300, 0],[-400, 0],[-500, 0],
[0,-120],[-100,-120],[-200,-120],[-300,-120],[-400,-120],[-500,-120],
[0,-240],[-100,-240],[-200,-240],[-300,-240],[-400,-240],[-500,-240],
[0,-360],[-100,-360],[-200,-360],[-300,-360],[-400,-360],[-500,-360],
[0,-480],[-100,-480],[-200,-480],[-300,-480],[-400,-480],[-500,-480]
];
var pos;
function main(){
var img = document.createElement('img')
img.id = 'sprite';
document.body.appendChild(img);
setInterval(function () {
anim(img);
}, 50);
}
var i = 0;
function anim(el) {
if (i < 30)
i++;
else
i = 0;
var x = position[i][0];
var y = position[i][1];
el.style.backgroundPositionX = x + 'px ';
el.style.backgroundPositionY = y + 'px ';
}
</script>

可能是什么问题?

最佳答案

Firefox 不支持单独的 backgroundPositionX/Y 属性,IE 可能会提示额外的空间。尝试:

el.style.backgroundPosition = x+"px "+y+"px";

关于javascript - CSS Sprite 代码在 Chrome 和 IE 中有效,但在 Firefox 中无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23108745/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com